我正在尝试从 Material UI 自定义 Select 组件。
这是它的样子:
However, when the select component is focused, I want to change the border-color from material UI's blue to a custom red color.
我尝试设置样式,但它根本没有做任何事情
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MuiSelect from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
select: {
borderColor: '#FF0000', //<------------ this does nothing
},
}));
const Select = () => {
const classes = useStyles();
return (
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel>Months</InputLabel>
<MuiSelect label="Months" className={classes.select}>
<MenuItem value="1">January</MenuItem>
<MenuItem value="2">February</MenuItem>
<MenuItem value="3">March</MenuItem>
<MenuItem value="4">April</MenuItem>
</MuiSelect>
</FormControl>
);
};
Select.propTypes = {};
export default Select;
最佳答案
尝试这个:
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
select: {
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
},
},
}));
关于css - Material 界面 : How can I change the border color of the Select component?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67710051/