样式化 Microsoft fabric-react 组件

Styling Microsoft fabric-react components

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

虽然优秀的 Fabric-react 文档可用 here，但我无法找到任何关于如何设置 fabric-react 组件样式的文档。

例如，Commandbar 组件的 Microsoft 文档可用 here。

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

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

所以，我的问题是：

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

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

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

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

当前

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

进行中

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

我们认识到的问题

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

不足的解决方法

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