流利/面料更改下拉菜单CSS

问题描述

我有一个来自Fluent UI的下拉菜单，并且想要更改下拉菜单选项的CSS。 我可以通过className将类添加到下拉菜单中，但是我无法通过在此处添加CSS来访问下拉选项，因为下拉菜单选项与<div id="root">位于同一级别的布局中。有没有一种方法可以将CSS设置为仅适用于此下拉菜单（最好从下拉菜单组件中）？

我的代码如下：

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

解决方法

只需使用styles property：

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

它对可以样式化的下拉列表的单个元素提供了精细的控制，在VSCode这样的编辑器中，自动补全功能建议所有可样式化的元素。

更新的代码和框：https://codesandbox.io/s/elegant-noyce-ddjek?file=/src/App.js