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

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

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


sharepoint spfx office-fabric
person mongrelHorde    schedule 01.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы добавить пользовательский CSS, укажите пользовательский CSS по свойству 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
  }
}

введите здесь описание изображения

person Lee_MSFT    schedule 05.06.2018