[英]React - How to customize drop downmenu in Select Material UI
I face an issue with Select Component from Material UI, the issue it renders in a diferent way in chrome on windows rather than mac. 我遇到了从Material UI中选择组件的问题,该问题以不同的方式在Windows而不是Mac上以chrome呈现。
on mac, it works just fine but in windows see image attached 在Mac上,效果很好,但在Windows中看到附加的图片
note if I remove native
flag it will be working but I like how its renderer as native select 请注意,如果我删除
native
标记,它将正常工作,但是我喜欢其渲染器作为本机选择的方式
here is sample on codeSandbox 这是codeSandbox上的示例
https://codesandbox.io/s/yvq524yv8z https://codesandbox.io/s/yvq524yv8z
here is the code sample 这是代码示例
const styles = theme => ({
dropdownStyle: {
backgroundColor: "lightgray" --> this change I need to make
}
});
<Select
native
value={value}
onChange={this.handleChange("value")}
name="value"
variant="filled"
classes={{
root: classes.selectEmpty,
select: classes.select
}}
MenuProps={{ classes: { paper: classes.dropdownStyle } }}
>
{contracts.map((contractItem, index) => {
return (
<option key={contractItem.agent_id} value={index}>
{contractItem.carrier}
</option>
);
})}
</Select>
You have to override the <option>
's backgroundColor: https://codesandbox.io/s/509n6o1v1l 您必须覆盖
<option>
的backgroundColor: https : //codesandbox.io/s/509n6o1v1l
You can look at the implementation to look at the CSS rule you need to override: https://github.com/mui-org/material-ui/blob/10b9d6aef53d20ba4e368f40c9acbb7b05c5c855/packages/material-ui/src/NativeSelect/NativeSelect.js#L48-L50 您可以查看实现以查看需要覆盖的CSS规则: https : //github.com/mui-org/material-ui/blob/10b9d6aef53d20ba4e368f40c9acbb7b05c5c855/packages/material-ui/src/NativeSelect/NativeSelect.NativeSelect.js #L48-L50
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.