4

我正在使用提供的组件，每次我需要更改组件样式时，我都想知道正确的方法是什么。

假设我需要在禁用 IconButton 时更改它的背景颜色。 https://codepen.io/elsl/pen/KrQQdV

如果我提供一个主题，我应该如何知道该组件使用哪个调色板/语义颜色？

const iconsTheme = Fabric.createTheme({
  semanticColors: {
    disabledBackground: "#ff9933"
  }
});
    

<Fabric.IconButton
  iconProps={{iconName:'ChevronRight'}}
  disabled
  theme={iconsTheme}
/>

如果我提供 IButtonStyles，我怎么知道属性名称是“rootDisabled.backgroundColor”？

const iconButtonStyles: IButtonStyles = {
       rootDisabled: {
         backgroundColor: "#ff0000",
       }
};

<Fabric.IconButton
   iconProps={{iconName:'CalculatorEqualTo'}}
   disabled   
   styles={iconButtonStyles}
/>

对于这两个选项，我不得不在 github 上深入研究组件的源代码以找出答案。

这是预期/正确的方式吗？ 如果是这样，在创建主题或 IStyle 之间是理想/最佳实践吗？

4

1 回答 1

4

主题与 IStyles

我想说，如果您希望所有 Fabric 组件都具有相同的自定义，请使用主题。

styles如果您只想自定义该特定组件（或该组件的一个特定实例），请使用该属性。

如果使用 IStyles，如何发现样式挂钩

有四种方法浮现在脑海。

  1. 查看文档（例如https://developer.microsoft.com/en-us/fabric#/components/dropdown，查看IDropdownStyles界面）（截图）
  2. 如果您使用像 Visual Studio Code 这样的编辑器，请使用 IntelliSense，它会自动枚举 IComponentStyles 并提供文档（如果有）。
  3. 检查 DOM 通常会提供提示（挂钩区域通常看起来像{area}-{number}这样root-33，例如“区域”名称所在的位置root。
  4. 阅读源代码。

不幸的是，对于选项 1 和选项 2，Fabric React 与IComponentStyles文档不一致，因此并非所有组件都有相同的描述性注释，在这些情况下，您可能需要回退到选项 3 和选项 4。

于 2018-11-27T05:35:07.473 回答