Question

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

让我们说禁用它时，我需要更改IconButton的背景色。 https://codepen.io/elsl/pen/KrQQdV

如果我提供一个主题，我应该如何知道该组件使用了哪个调色板/ 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来找出答案。

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

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样式应用于现有组件

1 个答案: