Как стилизовать компонент Office Fabric с помощью модуля SharePont Framework module.scss

Question

Я пытаюсь стилизовать VirtualizedComboBox, используемый в веб-части SPFX. Проблема заключается в том, что если я использую классы поля со списком (то есть.ms-ComboBox-Input) в качестве селекторов в модуле веб-частей.scss, они отображаются с добавленным к ним уникальным идентификатором (т.е.), но компонент VirtualizedComboBox не добавляет идентификатор к классам, которые он использует.

Согласно документам MS вложенные селекторы в scss не должны добавлять идентификатор к вложенному селектору, но это не так. Когда я вкладываю это, он появляется как ".formGroup_4d3ebf8a .ms-ComboBox-Input_4d3ebf8a", когда мне нужно ".formGroup_4d3ebf8a .ms-ComboBox-Input". Есть идеи?

Answer 1

Чтобы добавить пользовательский CSS, укажите пользовательское свойство css by className.

Например:

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