CODEWITHSUNDEEP
cssreactjsfluent-ui
milmal
milmal

Reputation: 551

Fluent/Fabric change dropdown menu css

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

Upvotes: 0

Views: 4959

Answers (2)

Conrad Addo
Conrad Addo

Reputation: 440

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'}`,
    },
  }
})
)

Upvotes: 0

alex3683
alex3683

Reputation: 1565

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

Upvotes: 3

Related Questions