Office UI Fabric - 如何将 css 样式应用于现有组件

Question

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

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

如果我提供主题，我怎么知道那个组件使用了哪个 palette/semanticColor？

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 上的 component's source code 以找出答案。

这是expected/correct方式吗？ 如果是这样，在创建 Theme 或 IStyle 之间，这将是 ideal/best 做法？

Answer 1

主题与 IStyles

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

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

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

想到了四种方法。

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

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

Office UI Fabric - 如何将 css 样式应用于现有组件

Office UI Fabric - How to apply css styles to existing components

reactjs

office-ui-fabric

office-fabric