Below is an illustration that demonstrates how to achieve this using version 4 (v5 example provided later):
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
flexWrap: "wrap"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
const useOutlinedInputStyles = makeStyles(theme => ({
root: {
"& $notchedOutline": {
borderColor: "red"
},
"&:hover $notchedOutline": {
borderColor: "blue"
},
"&$focused $notchedOutline": {
borderColor: "green"
}
},
focused: {},
notchedOutline: {}
}));
export default function SimpleSelect() {
const classes = useStyles();
const outlinedInputClasses = useOutlinedInputStyles();
const [values, setValues] = React.useState({
age: "",
});
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
function handleChange(event) {
setValues(oldValues => ({
...oldValues,
[event.target.name]: event.target.value
}));
}
return (
<form className={classes.root} autoComplete="off">
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
Age
</InputLabel>
<Select
value={values.age}
onChange={handleChange}
input={
<OutlinedInput
labelWidth={labelWidth}
name="age"
id="outlined-age-simple"
classes={outlinedInputClasses}
/>
}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
https://codesandbox.io/s/outlinedinput-border-color-u1br7?fontsize=14
To delve deeper into this topic, consider exploring the following related responses:
- Customize outline for OutlinedInput in React Material-UI
- Extensive global outlined customization
- Altering border color on Material-UI TextField components
Here's a closely related scenario tailored for v5 of Material-UI utilizing styled:
import React from "react";
import { styled } from "@material-ui/core/styles";
import { outlinedInputClasses } from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const StyledForm = styled("form")(`
display: flex;
flex-wrap: wrap;
`);
const StyledFormControl = styled(FormControl)(({ theme }) => ({
margin: theme.spacing(1),
minWidth: 120
}));
const StyledSelect = styled(Select)(`
& .${outlinedInputClasses.notchedOutline} {
border-color: red;
}
&:hover .${outlinedInputClasses.notchedOutline} {
border-color: blue;
}
&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline} {
border-color: lime;
}
`);
export default function SimpleSelect() {
const [values, setValues] = React.useState({
age: ""
});
function handleChange(event) {
setValues((oldValues) => ({
...oldValues,
[event.target.name]: event.target.value
}));
}
return (
<StyledForm autoComplete="off">
<StyledFormControl variant="outlined">
<InputLabel id="outlined-age-simple-label">Age</InputLabel>
<StyledSelect
labelId="outlined-age-simple-label"
value={values.age}
onChange={handleChange}
name="age"
label="Age"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</StyledSelect>
</StyledFormControl>
</StyledForm>
);
}
https://codesandbox.io/s/outlinedinput-border-color-29715?fontsize=14&hidenavigation=1&theme=dark