4

我已经使用微软在此处提供的 Typescript-React-Started 启动了 Microsoft Fabric-react 。

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

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

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

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

所以，我的问题是：

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

2 回答 2

3

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

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

于 2018-08-14T22:33:07.437 回答
1

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

当前的

  1. 用于loadTheme提供组件范围的颜色和字体。
  2. 对组件使用stylesprop 进行一次性调整。
  3. 如果您想styles为特定组件类型提供标准覆盖，您可以使用Customizer提供 scopedSettings 来管道标准覆盖。（这不是实验性的，可能会改变。）
  4. Legacy className / global 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在实验中进行了重构。
于 2019-02-19T18:21:22.130 回答