[英]Changing border color of Material-UI Select Component
Here is my Select component from materials-UI这是我来自 materials-UI 的 Select 组件
<FormControl variant="outlined">
<Select
value={this.state.value}
onChange = {this.handleChange}
className={this.props.classes.select}
inputProps = {{classes:{icon : this.props.classes.icon}}}
>
{this.state.valuelist.map((block,idx) => {
return(<MenuItem key={Object.keys(block)[0]}
value = {Object.keys(block)[0]}>
{Object.keys(block)[0]}</MenuItem>)
})}
</Select>
</FormControl>
and customized styling as recommended by another answers on stackoverflow:以及 stackoverflow 上另一个答案推荐的自定义样式:
const styles = theme => createStyles({
select: {
color : 'white',
borderRadius : '10px',
borderWidth : '10px',
'&:before': {
borderColor: 'white',
},
'&:after': {
borderColor: 'white',
}
},
icon: {
fill: '#00DBB3',
}
})
The icon customization works perfectly.图标定制完美无缺。 However, the border colors don't change.
但是,边界 colors 不会改变。 I have tried many ways and answers so far and nothing seems to change the borderColor of the select component.
到目前为止,我已经尝试了很多方法和答案,但似乎没有任何改变 select 组件的 borderColor 。 Any help on this will be appreciated !
对此的任何帮助将不胜感激!
That border is actually the work of your variant="outlined"
FormControl
.该边框实际上是您的
variant="outlined"
FormControl
。 So you can target that element's border instead of the Select
component所以你可以定位该元素的边框而不是
Select
组件
const useStyles = makeStyles({
customOutline: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "white"
}
}
});
function App() {
const classes = useStyles();
return (
<FormControl
variant="outlined"
classes={{ root: classes.customOutline }}
>...</FormControl>
);
}
If you want to change the border color of MUI Select globally, for the whole theme (using MUI theme customization) , you can add this to your theme definition:如果您想全局更改 MUI Select 的边框颜色,对于整个主题(使用 MUI 主题自定义) ,您可以将其添加到您的主题定义中:
MuiSelect: {
styleOverrides: {
root: {
borderRadius: '6px',
boxShadow: SELECT_BOX_SHADOW,
'& fieldset.MuiOutlinedInput-notchedOutline': {
borderColor: "red",
},
},
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.