sharepoint - How to Style Office Fabric Component with SharePont Framework module.scss

Question

I am trying to style a VirtualizedComboBox being used in a SPFX web part. The problem is that if I use the combo box classes (ie. .ms-ComboBox-Input) as selectors within the web parts module.scss they get rendered out with the unique ID appended to them (ie. .ms-ComboBox-Input_4d3ebf8a), but the VirtualizedComboBox component does not append the ID to the classes it uses.

According to the MS docs nesting selectors in the scss should not append the ID to the nested selector, but that is not proving to be the case. When I nest it comes out as ".formGroup_4d3ebf8a .ms-ComboBox-Input_4d3ebf8a", when I need ".formGroup_4d3ebf8a .ms-ComboBox-Input". Any ideas?

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