如何解决流利/面料更改下拉菜单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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。