我正在使用 material-ui v5 进行学习。我在覆盖 mui Select 组件的默认样式时遇到困难。我想在将鼠标悬停在它上面并且处于聚焦状态时更改 Select 的颜色。目前,聚焦状态的颜色是这样的。
这是我的代码:
import { useState, useEffect } from 'react';
import { makeStyles } from '@mui/styles';
import { Select, MenuItem } from '@mui/material';
const useStyles = makeStyles({
select: {
'&.MuiOutlinedInput-root': {
width: '200px'
},
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
'&:hover': {
borderColor: 'green'
}
},
}
})
function App() {
const classes = useStyles();
const [age, setAge] = useState('');
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.value);
};
return (
<Select
variant="outlined"
className={classes.select}
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
);
}
export default App;
如有任何帮助,我们将不胜感激。
最佳答案
首先:
@mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.
更多可以查看here .所以对于定制,你应该选择 styled-components .
MUI
中的Select
组件使用其背后的输入字段,要完成您需要自定义input
的操作,这就是为什么您正在使用 .MuiOutlinedInput-root
类。因此,MUI
有一些 input
自定义示例 here .
这是一个自定义的Select
示例:
const CustomSelect = styled(Select)(() => ({
width: 300,
"&.MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "red"
},
"&:hover fieldset": {
borderColor: "yellow"
},
"&.Mui-focused fieldset": {
borderColor: "green"
}
}
}));
关于javascript - 更改 Material UI 的颜色选择组件边框不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72400110/