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

Question

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