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.

Ryan Cogswell · Accepted Answer · 2022-08-08T14:07:56.337

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:

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 — AlbertMunichMar, Feb 29 '20 at 17:33
`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](https://stackoverflow.com/questions/56122219/in-material-ui-when-do-we-use-input-vs-textfield-for-building-a-form/56135272#56135272). — Ryan Cogswell, Feb 29 '20 at 18:00
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](https://github.com/mui-org/material-ui/blob/v4.9.5/packages/material-ui/src/TextField/TextField.js#L157) rendered by TextField). — Ryan Cogswell, Feb 29 '20 at 18:00
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 ? — Anuj, Mar 01 '22 at 22:26
How do you setup the above styles in global theme? Any pointer? Thanks. — iphonic, Aug 04 '22 at 13:03
@iphonic See my answer here: https://stackoverflow.com/questions/54789989/global-outlined-override/54794340#54794340. — Ryan Cogswell, Aug 08 '22 at 14:07

score 3 · Answer 2 · answered Feb 28 '20 at 23:05

3

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.

answered Feb 28 '20 at 23:05

curiousdev

626
8
24

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? – AlbertMunichMar Feb 28 '20 at 23:52

score 0 · Answer 3 · edited Jun 17 '20 at 22:16

0

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.

edited Jun 17 '20 at 22:16

Dominik

6,078
8
37
61

answered Jun 17 '20 at 18:59

Sarah Ann Garcia

11
1

score 0 · Answer 4 · answered Nov 08 '21 at 15:51

0

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.

answered Nov 08 '21 at 15:51

Adam Woolf

1

1

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](/help/how-to-answer). – Community Nov 08 '21 at 17:52

How to change material UI select border and label

4 Answers4

Linked

Related