0

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

4

1 回答 1

2

只需使用该styles属性：

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

它对可以设置样式的下拉列表的单个元素进行细粒度控制，并且在 VSCode 等编辑器中，自动完成会建议所有可设置样式的元素。

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

于 2020-08-14T13:42:28.850 回答