(This answer was written for Material-UI v4, but I assume the general idea applies for v5 as well.)
The Problem with the Textfield border is that the color you want to set
has a lower specificity than the original style that Material-UI (MUI) sets.
E.g. MUI sets this class when focused:
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: (some color);
}
which is more specific than a custom selector like:
.Component-cssNotchedOutline {
border-color: #f0f;
}
Solution A (not recommended)
You can add the !important exception to the color, but this is 'bad practice':
import React from 'react';
import { createStyles, TextField, WithStyles, withStyles } from '@material-ui/core';
interface IProps extends WithStyles<typeof styles> {}
const styles = createStyles({
notchedOutline: { borderColor: '#f0f !important' },
});
export const TryMuiA = withStyles(styles)((props: IProps) => {
const { classes } = props;
return ( <TextField variant={ 'outlined' } label={ 'my label' }
InputProps={ {
classes: {
notchedOutline: classes.notchedOutline,
},
} }
/> );
});
Solution B (recommended)
The official MUI example uses other ways to increase specificity.
The 'trick' is not to style the Element directly, like:
.someChildElement { border-color: #f0f }
but to add some extra selectors (more than MUI does*), e.g.:
.myRootElement.someExtra { border-color: #f0f }
or:
.myRootElement .someChildElement { border-color: #f0f }
*(Actually it might be enough to use the same selectors as MUI does,
because if specificity of the selectors is the same,
then the 'later' ones are used. But in case of SSR, the order of the CSS rules might change after rehydration.)
Include the parent: You might have noticed that setting notchedOutline does set the color for the un-focused element, but not for the focused.
That is because the MUI style includes the parent element of the input box (.MuiOutlinedInput-root.Mui-focused).
So you need to include the parent as well.
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
const styles = {
root: { // - The TextField-root
border: 'solid 3px #0ff', // - For demonstration: set the TextField-root border
padding: '3px', // - Make the border more distinguishable
// (Note: space or no space after `&` matters. See SASS "parent selector".)
'& .MuiOutlinedInput-root': { // - The Input-root, inside the TextField-root
'& fieldset': { // - The <fieldset> inside the Input-root
borderColor: 'pink', // - Set the Input border
},
'&:hover fieldset': {
borderColor: 'yellow', // - Set the Input border when parent has :hover
},
'&.Mui-focused fieldset': { // - Set the Input border when parent is focused
borderColor: 'green',
},
},
},
};
export const TryMui = withStyles(styles)(function(props) {
const { classes } = props;
return (<TextField label="my label" variant="outlined"
classes={ classes }
/>);
})
Note that you can increase specificity in different ways, e.g. this would work as well (a bit different):
'& fieldset.MuiOutlinedInput-notchedOutline': {
borderColor: 'green',
},
Remark: It might seem a little bit 'dirty' to add selectors only to increase specificity,
when you don't really 'need' them. I think it is, but this workaround was sometimes
the only solution since CSS was invented, so it is considered kind of acceptable.
