Title: How to change material UI select border and label
Tags: reactjs;material-ui
Question: I am trying to change the border of a ```select``` component from Material-UI.
So far I've tried:

```const styles = theme =&gt; ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "lightgrey"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2
  },
  cssLabel: {
    color: "pink",
    "&amp;$cssFocused": {
      color: "pink"
    }
  },
  cssFocused: {
    color: "pink"
  },
  underline: {
    "&amp;: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.


Here is the accepted answer: 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 &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;

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

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

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

const rootElement = document.getElementById(&quot;root&quot;);
ReactDOM.render(<App /&gt;, rootElement);
```

Related answers:

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


Comment for this answer: 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
Comment for this answer: `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).
Comment for this answer: 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).
Comment for this answer: @iphonic See my answer here: https://stackoverflow.com/questions/54789989/global-outlined-override/54794340#54794340.
Comment for this answer: How do you setup the above styles in global theme? Any pointer? Thanks.
Comment for this answer: 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 ?

Here is another answer: Okay in my style overrides for the theme I put this in...

```MuiOutlinedInput: {
     root: {
         '&amp;$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.


Here is another answer: 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.

Comment for this answer: 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).

Here is another answer: You can override styling of child element classes e.g.

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

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

Comment for this answer: 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?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 4, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:02/28/20', 'FavoriteCount': 5.0, 'PostTypeId': 1, 'Tags': '<reactjs><material-ui>', 'Title': 'How to change material UI select border and label', 'ViewCount': 16341, 'id': 60459932, 'user_AboutMe': None, 'user_AccountId': 9747919.0, 'user_DisplayName': 'AlbertMunichMar', 'user_Reputation': 1457.0, 'user_Views': 225.0, 'user_id': 7227222.0}}