Fluent/Fabric change dropdown menu css

Question

I have a dropdown from Fluent UI and want to change the CSS of the dropdown options. I can add classes though className to the dropdown, but I can't reach the dropdown options through adding CSS here because the dropdown options exist on a layout on the same level as <div id="root">. Is there a way I can set the CSS only to apply to this dropdown (preferably from the dropdown component)?

My code is as following:

const styles = mergeStyleSets({
  main: {
    selectors: {
      "& .ms-Dropdown-title": {
        color: "red"
      },
      "& .ms-Dropdown-optionText": {
        color: "blue" //does not work
      }
    }
  }
});

const Test = () => {
  const options = [
    { key: "A", text: "I am an option" },
    { key: "B", text: "Do not choose me" },
    { key: "C", text: "Here is a third option" }
  ];
  return (
    <div style={{ width: "300px" }}>
      <Dropdown
        placeholder="Select an option"
        label="Choose something"
        options={options}
        className={styles.main}
      />
    </div>
  );
};

Codesandbox: https://codesandbox.io/s/bold-moon-u0ol2?file=/src/App.js

Answer 1

Just use the styles property:

<Dropdown
  placeholder="Select an option"
  label="Choose something"
  options={options}
  styles={{
    title: { color: 'red' },
    dropdownOptionText: { color: 'blue' }
  }}
/>

It gives fine grained control over the single elements of a dropdown that can be styled and, in an editor like VSCode, autocompletion suggests all styleable elements.

Updated Codesandbox: https://codesandbox.io/s/elegant-noyce-ddjek?file=/src/App.js