How to change material UI select border and label - reactjs

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.

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

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.

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.

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.