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

To add custom CSS, specify the custom css by className property.

For example:

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