Fluent/Fabric 更改下拉菜单 css

Question

我有一个来自 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>
  );
};

代码沙盒： https://codesandbox.io/s/bold-moon-u0ol2?file=/src/App.js

Answer 1

只需使用 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

Fluent/Fabric 更改下拉菜单 css

Fluent/Fabric change dropdown menu css

css

reactjs

fluent-ui