How to change material UI select border and label

Question

I am trying to change the border of a select component from Material-UI. So far I've tried:

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "lightgrey"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2
  },
  cssLabel: {
    color: "pink",
    "&$cssFocused": {
      color: "pink"
    }
  },
  cssFocused: {
    color: "pink"
  },
  underline: {
    "&:after": {
      borderBottom: "1px solid pink",
      borderTop: "1px solid pink"
    }
  }
});

I can customise TextField etc., but after many many hours, I still can not customise the Select. I tried to pass also an Input, but then you have to customise the Input, which is even worse.

Could someone help me with this sandbox?

https://codesandbox.io/s/material-demo-ecj1k

I would really appreciate it.

Kleeman

Answer 1

Below is an example of overriding the colors of the border (MuiOutlinedInput-notchedOutline), label (MuiInputLabel-root), and selected item text (MuiOutlinedInput-input) for default, hover, and focused states.

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    width: 200,
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "& .MuiInputLabel-root": {
      color: "green"
    },
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "&:hover .MuiInputLabel-root": {
      color: "red"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-root.Mui-focused": {
      color: "purple"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  }
});

function App() {
  const [age, setAge] = React.useState("");
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        value={age}
        onChange={e => setAge(e.target.value)}
        variant="outlined"
        label="My Label"
        select
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </TextField>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related answers:

• Change border color on Material-UI TextField
• Is there a way to style the border color and text color of <TextField/> in Material-UI without using makeStyles
• Global outlined override

Immuno

beautiful answer. How did you decide to not use the Select component and yes the TextField componenet with the select prop? Because it's easier to style? thanks for your help – Kleeman

TextField is just easier to use in general since it takes care of ensuring the correct structure of FormControl, InputLabel, Select, and some of the accessibility ties between them. Unless you need to customize that structure, I recommend using TextField. – Immuno

The styling approach will work exactly the same when using the lower-level pieces. You would then apply this class to the FormControl (which is the root component rendered by TextField). – Immuno

I have to use select since mine is multiple select I want to give border to the pop over menu I tried "& .MuiMenu-paper" and other classes for that matter did not work any idea on how to give border/styling to that ? – Moeller

How do you setup the above styles in global theme? Any pointer? Thanks. – Bahadur

@Bahadur See my answer here: https://mcmap.net/q/591503/-global-outlined-override/…. – Immuno

Answer 2

You can override styling of child element classes e.g.

selectBorder: {
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'red'
  }
}

If you apply className={classes.selectBorder} to your Select component, it will change the border color to red.

Lagas

actually what i want is not the border, but when I click the the dropdown, the focused border. Where I can get the name of the class that I have to point? – Kleeman

Answer 3

Okay in my style overrides for the theme I put this in...

MuiOutlinedInput: {
     root: {
         '&$focused $notchedOutline': {
         borderColor: 'inherit !important'
         }
     }
}

It seemed to the trick. It didn't address the Label... but it did address the border. I've spent WAY too many hours on this. So it will do for now.

Istanbul

Answer 4

I also spent too long with this problem. In the end I just used a TextField and give it select prop. Then you can style it as the regular textfield.

Grindelia

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Officer

Answer 5

With MUI sx you can now add styling inline with the mui component.

The example code below changes the input label to red and the border to green when the select component is focused. The selected dropdown item background color is also set to pink.

<FormControl>
  <InputLabel 
    sx = {{'&.Mui-focused': { color: 'red'}}}
    id='label'> Your Label Here
  </InputLabel>
  <Select
    labelId='label'
    id='label'
    value={timeRange}
    onChange={handleChange}
    fullWidth
    label='Timeframe'

    sx = {{
      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'green'
      }
    }}
    
    MenuProps={{ sx: {
      '&& .Mui-selected': {backgroundColor: `pink`}
      }}}
   >

      <MenuItem value={1}>Option 1</MenuItem>
      <MenuItem value={2}>Option 2</MenuItem>
      <MenuItem value={7}>Option 3</MenuItem>

    </Select>
  </FormControl>

Economic