设置Microsoft Fabric反应组件的样式

Question

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

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

例如，here提供了Commandbar组件的Microsoft文档。

默认主题使用灰色命令栏和蓝色命令按钮呈现命令栏背景。

据我了解，Microsoft提供了一个主题/样式系统。 不幸的是，我找不到任何有关如何更改默认主题或创建自定义主题的示例。

所以，我的问题是：

1. 如何更改默认主题，并在面料反应组件上应用特定主题？
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

这是Microsoft在Github上回复的副本，因此优点不是我的：）

当前

1. 使用loadTheme提供组件宽的颜色和字体。
2. 对组件进行一次调整即可使用styles道具。
3. 如果您想为特定组件类型提供标准的styles替代，则可以使用Customizer提供scopedSettings来传递标准替代。 （这不是实验性的，可能会改变。）
4. 旧版className /全局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重构中进行了实验。