Styling the MUI select component
Below I have provided two alternatives.
Both alternatives are valid.
My personal favorite is alternative 2.
Good luck!
Alternative 1
import Select, { SelectChangeEvent } from '@mui/material/Select';
import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import { MenuItem } from '@mui/material';
type SelectInputProps = Readonly<{
label?: string;
value?: string;
onChange?: (event: SelectChangeEvent) => void;
}>;
const SelectInput: React.FC<SelectInputProps> = (props) => {
const { value = '', label, onChange = () => {} } = props;
return (
<FormControl fullWidth>
<InputLabel
id="08d1e3b2-5917-4668-9b17-22c49d978fcb"
sx={{
'&.MuiInputLabel-root': {
color: 'orange', // <------------------ label-color by default
},
'&.MuiInputLabel-root.Mui-focused': {
color: 'green', // <------------------ label-color on focus
},
}}
>
{label}
</InputLabel>
<Select
labelId="08d1e3b2-5917-4668-9b17-22c49d978fcb"
value={value}
label={label}
onChange={onChange}
sx={{
// ALTERNATIVE 1
'& .MuiSvgIcon-root': {
color: 'purple', // <------------------ arrow-svg-color
},
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'orange', // <------------------ outline-color by default
},
'&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'red', // <------------------ utline-color on hover
},
'&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'green', // <------------------ outline-color on focus
}
}}
>
// PUT YOUR MENU ITEMS HERE
</Select>
</FormControl>
);
};
export default SelectInput;
Alternative 2
import Select, { SelectChangeEvent } from '@mui/material/Select';
import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import { MenuItem } from '@mui/material';
type SelectInputProps = Readonly<{
label?: string;
value?: string;
onChange?: (event: SelectChangeEvent) => void;
}>;
const SelectInput: React.FC<SelectInputProps> = (props) => {
const { value = '', label, onChange = () => {} } = props;
return (
<FormControl fullWidth>
<InputLabel
id="08d1e3b2-5917-4668-9b17-22c49d978fcb"
sx={{
'&.MuiInputLabel-root': {
color: 'orange', // <------------------ label-color by default
},
'&.MuiInputLabel-root.Mui-focused': {
color: 'green', // <------------------ label-color on focus
},
}}
>
{label}
</InputLabel>
<Select
labelId="08d1e3b2-5917-4668-9b17-22c49d978fcb"
value={value}
label={label}
onChange={onChange}
sx={{
// ALTERNATIVE 2
'& .MuiSvgIcon-root': {
color: 'purple', // <------------------ arrow-svg-color
},
'&.MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'red', // <------------------ outline-color by default
},
'&:hover fieldset': {
borderColor: 'yellow', // <------------------ outline-color on hover
},
'&.Mui-focused fieldset': {
borderColor: 'green', // <------------------ outline-color on focus
},
},
}}
>
// PUT YOUR MENU ITEMS HERE
</Select>
</FormControl>
);
};
export default SelectInput;