I have been experimenting with material-ui v5 to improve my skills. I am currently struggling to customize the default style of the mui Select component. My goal is to modify the color of the Select element when it is being hovered over or in a focused state. The current appearance of the focused state is shown below.
https://i.sstatic.net/Rn4k0.png
Below is the snippet of my code:
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;
Any form of assistance would be highly appreciated.