如何使用SharePont Framework module.scss设置Office Fabric组件的样式

Question

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

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

Answer 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
  }
}