reactjs Fluent/Fabric更改下拉菜单css

fzwojiic 于 2022-12-22 发布在 React

关注(0)|答案(2)|浏览(191)

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

reactjs

来源：https://stackoverflow.com/questions/63412295/fluent-fabric-change-dropdown-menu-css

2条答案

按热度按时间

nbnkbykc1#

只需使用styles属性：

<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

赞(0）回复(0）举报 2022-12-22

m2xkgtsf2#

如果要基于disabled属性对每个下拉选项使用条件样式，可以执行以下操作：

export const optionsWithCustomStyling: any = ( 
  options: IDropdownOption[]
  ) => 
options.map((x) => ({
  key: x.key,
  text: x.text,
  styles: {
    optionText: {
      color: `${x.disabled ? '#FF0000' : '#000000'}`,
    },
  }
})
)

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs Fluent/Fabric更改下拉菜单css

2条答案

相关问题

热门标签

最新问答