0
307
ViewsChange color of Material UI Select component border not working
I am using material-ui v5 for learning purposes. I am facing difficulty overriding the default style of the mui Select component. I want to change the color of Select when hovering over it and also in a focused state. Currently, the color of focused state is like this.
Here is 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 help would be greatly appreciated.
2 answers
Answer question0
First of all:
@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.
You can check more here. So for customization, you should probably go with styled-components.
Select components in MUI uses input fields behind it, and to accomplish what you want you need to customize the input and thats why you are using .MuiOutlinedInput-root class. So, MUI has some input customizations examples here.
And here´s a custom Select example:
const CustomSelect = styled(Select)(() => ({
width: 300,
"&.MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "red"
},
"&:hover fieldset": {
borderColor: "yellow"
},
"&.Mui-focused fieldset": {
borderColor: "green"
}
}
}));
0
Using the new API for styles, "styled", you can achieve the level of custom you want by using the class objects mui offers to import. I stated as important that you do not leave spaces between the '&' and the '.' in the css, otherwise it won't work, test it! In this sample I'm customizing the border color of a Select, in hover, with :hover selector and in focus state with the focused class from the component. To finish, the select is declared as notchedOutlined, hence the class used.
import {
Select,
outlinedInputClasses,
selectClasses
} from '@mui/material';
import { styled } from '@mui/system';
export const StyledSelect = styled(Select)`
width: 150px;
height: 40px;
color: #fff;
border-color: #fff;
& .${selectClasses.icon} {
color: #fff;
}
& .${outlinedInputClasses.notchedOutline} {
border-color: #fff;
}
&:hover .${outlinedInputClasses.notchedOutline} {
border-color: #fff;
}
&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}
{
// VERY IMPORTANT TO NOT LEAVE AN EMPTY SPACE BETWEEN '&' AND '.'
border-color: #fff !important;
}
`;