Fluent/Fabric change dropdown menu css - 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

Answer 2

If you want to use a conditional styling for each dropdown option based on the disabled property, you can do the following:
export const optionsWithCustomStyling: any = (
options: IDropdownOption[]
) =>
options.map((x) => ({
key: x.key,
text: x.text,
styles: {
optionText: {
color: `${x.disabled ? '#FF0000' : '#000000'}`,
},
}
})
)