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.
To change the color of Select component's border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them. We call makeStyles with a function that returns an object with the select property set to an object with the drop down styles.
To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render. We set the Select 's IconComponent prop to a function that returns the Person icon component. And we add some MenuItem components to add some choices.
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With