Change color of Material UI Select component border not working

user_15222760 0
Viewed 463

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.

enter image description here

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.

material-ui reactjs css javascript
2 Answers

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"
    }
  }
}));
user_47740450

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;
  }
`;
user_177577780
Related