样式化 Microsoft fabric-react 组件

Question

我已经使用 Microsoft here 提供的 Typescript-React-Started 启动了 Microsoft fabric-react。

尽管 here 提供了出色的 Fabric-react 文档，但我找不到任何有关如何设置 fabric-react 组件样式的文档。

例如，Commandbar 组件的 Microsoft 文档可在 here 获得。

默认主题将命令栏背景呈现为灰色，命令按钮为蓝色。

据我所知，微软提供了一个主题/样式系统。 不幸的是，我找不到任何关于如何更改默认主题或创建自定义主题的从头到尾的示例。

所以，我的问题是：

1. 如何更改默认主题，并在 fabric-react 组件上应用特定主题？
2. 如何创建自定义主题？

Answer 1

感谢您使用 Office UI Fabric React！您是否有机会阅读这些关于样式和将主题应用于组件的 wiki 页面？

• https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling
• https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
• https://developer.microsoft.com/en-us/fabric#/components/themes

您也可以通过https://developer.microsoft.com/en-us/fabric#/styles/themegenerator 生成您的主题，然后使用上面页面中描述的方法应用它。

Answer 2

这是微软在 Github 上回复的副本，所以不是我的优点 :)

当前

1. 使用loadTheme 提供组件范围的颜色和字体。
2. 对组件使用 styles 属性进行一次性调整。
3. 如果您想为特定的组件类型提供标准的styles 覆盖，您可以使用Customizer 提供 scopedSettings 以在标准覆盖中使用管道。 （这不是实验性的，可能会改变。）
4. 传统类名/全局 css 支持仍然有效，即使用 className 提供您自己的类覆盖，并根据需要引用全局类名。虽然这是一个选项，但不建议这样做，因为它非常脆弱并且存在许多问题（选择器特异性、没有构建时间验证、容易破坏等）。我们正在考虑在未来完全删除全局类名主要版本。

进行中

我们的目标是把所有的定制化都融入到主题中；这使您可以随着时间的推移修改您的设计。我们在这里跟踪一堆工作：https://github.com/OfficeDev/office-ui-fabric-react/projects/26

我们发现的问题

1. Customizer 提供上下文覆盖过于笼统，不允许我们拥有特定于主题的逻辑，如缓存主题。
2. ITheme 应扩展为允许您通过管道输入特定于组件的覆盖，以及其他站点范围的设置（如大小调整、阴影和动画）。
3. 传入styles不是一个好的合约；您需要知道样式的目标组件部分（有时是多个部分），有时需要覆盖哪些选择器（我在这里使用伪元素吗？我的选择器不够具体吗？）
4. 不支持配色方案（想想“深色标题”，其中的切换应该与“浅色内容区域”中的不同。

缺点的解决方法

1. 公开一个专用的ThemeProvider 组件。我们仍然会使用loadTheme 来提供默认主题，而 ThemeProvider 可以切换出方案，甚至可以在框中切换主题。
2. 添加对配色方案的支持。
3. 引入样式变量，从完整的样式定义中抽象出常用的旋钮。这让您不必担心部件或选择器，而只需抽象地关注组件的外观。我们在 Button 和 Toggle 的重构实验中进行了实验。