6

I am trying to customize the Select component from Material UI.

This is what it looks like:

enter image description here

However, when the select component is focused, I want to change the border-color from material UI's blue to a custom red color.

I tried setting the styles but it doesn't do anything at all

import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MuiSelect from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  select: {
    borderColor: '#FF0000',      //<------------ this does nothing
  },
}));

const Select = () => {
  const classes = useStyles();
  return (
    <FormControl variant="outlined" className={classes.formControl}>
      <InputLabel>Months</InputLabel>
      <MuiSelect label="Months" className={classes.select}>
        <MenuItem value="1">January</MenuItem>
        <MenuItem value="2">February</MenuItem>
        <MenuItem value="3">March</MenuItem>
        <MenuItem value="4">April</MenuItem>
      </MuiSelect>
    </FormControl>
  );
};

Select.propTypes = {};

export default Select;

4 Answers 4

15

Try this:

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  select: {
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'red',
    },
  },
}));

2
10

If someone is interested in the latest version of MUI 5.

import {
  Select,
} from '@mui/material';
import { SxProps } from '@mui/material/styles';
import classes from './component.module.css';

const styles: SxProps = {
  select: {
    '.MuiOutlinedInput-notchedOutline': {
      borderColor: '#color',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: '#color',
      borderWidth: '0.15rem',
    },
  },
};

<Select
     variant="outlined"
     sx={styles.select}
     inputProps={{
       classes: {
         icon: classes.icon,
           },
       }}
  >

For the icon, you can create a separate file component.module.css

.icon {
    fill: #color;
}
1

You can also use

const selectFieldStyles = {
".MuiOutlinedInput-notchedOutline": {
      borderColor: "#E34824",
    },
        "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "#E34824",
            borderWidth: "thin",
        },
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "#E34824",
            borderWidth: "thin",
        },
    };

And then in your Select component

<Select sx={selectFieldStyles}>...</Select>
1

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.