如何使用 SharePoint 框架 module.scss 设置 Office Fabric 组件的样式答案

【问题标题】：How to Style Office Fabric Component with SharePont Framework module.scss如何使用 SharePoint 框架 module.scss 设置 Office Fabric 组件的样式
【发布时间】：2018-11-11 19:09:59
【问题描述】：

我正在尝试设置在 SPFX Web 部件中使用的 VirtualizedComboBox 的样式。问题是，如果我使用组合框类（即 .ms-ComboBox-Input）作为 Web 部件 module.scss 中的选择器，它们会被渲染出来，并附有唯一 ID（即 .ms-ComboBox-Input_4d3ebf8a )，但 VirtualizedComboBox 组件不会将 ID 附加到它使用的类。

根据 MS 文档，scss 中的嵌套选择器不应将 ID 附加到嵌套选择器，但事实并非如此。当我嵌套它作为“.formGroup_4d3ebf8a .ms-ComboBox-Input_4d3ebf8a”时，当我需要“.formGroup_4d3ebf8a .ms-ComboBox-Input”时。有什么想法吗？

【问题讨论】：

标签： sharepoint spfx office-fabric

【解决方案1】：

要添加自定义 CSS，请通过 className 属性指定自定义 CSS。

例如：

<ComboBox
              label='Disabled uncontrolled example with defaultSelectedKey:'
              defaultSelectedKey='D'
              className={ styles.TestClass }
              options={
                [
                  { key: 'A', text: 'Option a' },
                  { key: 'B', text: 'Option b' },
                  { key: 'C', text: 'Option c' },
                  { key: 'D', text: 'Option d' },
                  { key: 'E', text: 'Option e' },
                  { key: 'F', text: 'Option f' },
                  { key: 'G', text: 'Option g' },
                ]
              } 


.TestClass{
  background-color: aqua;

  input {
    background-color: cadetblue
  }
}

【讨论】：