I'm trying to change the border color of a v4.13 MaterialUI Outlined Input. However I have not gotten anything to work when trying to override the CSS.
I've tried multiple CSS rules applied to each element, the select and the OutlinedInput, with the two below being the most recent. What am I doing wrong here?
const styles = () =>
createStyles({
select: {
"&:before": {
borderColor: "red"
},
"&:after": {
borderColor: "red"
},
},
outline: {
"&:before": {
borderColor: "red"
},
"&:after": {
borderColor: "red"
},
}
});
<Select
label={label}
fullWidth={true}
error={touched && invalid}
className={inputStyles}
classes={{ root: classes.select }}
input={
<OutlinedInput
{...input}
fullWidth={true}
id={input.name}
labelWidth={this.state.labelWidth}
classes={{notchedOutline: classes.outline}}
/>
}
{...custom}
>
{children}
</Select>
I can see here where the border-color is being set, but am unable to override it.
I will go to the material-ui website and search for TextField component. Once the page opens, I will click the pencil icon, which says "Edit in CodeSandbox". This opens CodeSandbox in a new tab with the entire code for all the TextFields.
To change the text field font color in React Material UI, we call the makeStyles function with an object with the styles we want to apply. to call makeStyles with an object that has the input property that's set to an object with the color property set to 'blue' . Next, we call useStyles to return the classes object.
To change the outline for OutlinedInput with React Material UI, we can use the makeStyles function. We call makeStyles with a callback to return the border styles. We set all the borders to have width 0. Then we call useStyles in App to return the classes. Next, we set disableUnderline to true to remove the underline.
It looks promising since it has a class named MuiOutlinedInput-notchedOutline. We target it with the following: A couple points about the code above: First, notice that there is no space between & and $disabled. Second, notice that there is a built in class called notchedOutline in the InputProps API that Material UI intends for us to target.
We see it applied in dev tools, yet we don’t see an orange border around the TextField. Unfortunately, targeting the root class applies the borderColor to an inner element of the TextField that doesn’t actually control the border color. So let’s try again via trial-and-error.
nice work! it isn't obvious from the Material UI documentation that all sorts of CSS selectors can be used. So true. I started out with Semantic UI and had issues with responsiveness, but Material UI is giving me its own headaches. '&:hover $notchedOutline' (i.e. $notchedOutline) was the thing I needed, thanks!
Here's an example showing how to do this in v4 (v5 example further down):
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>
);
}
You can read more about this in my related answers:
Here's a similar example, but for v5 of Material-UI using 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>
);
}
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