How to style Material UI TextField component with Modular CSS? - css

Question

I am trying to change the border color of the Material UI TextField component using Modular CSS, but when I try to, it does not work.
CSS (In Styles.module.css):
.formInput {
font-size: 18px !important;
font-family: Roboto, serif !important;
color: #057FA8 !important;
border-color: #057FA8 !important;
}
.formInput:hover {
border-color: #057FA8 !important;
}
JS:
import styles from './Styles.module.css';
...
<TextField id="name" name="name" label="Name" className={styles.formInput} value={formik.values.name} onChange={formik.handleChange}
error={Boolean(formik.errors.name)} helperText={formik.errors.name}
onBlur={(e) => {
e.preventDefault();
formik.validateField('name');
formik.setFieldTouched('name');
}}
margin='normal'
fullWidth
variant="outlined"
/>
Any help would be greatly appreciated.

Answer 1

Material UI V4 provides a classes property on TextField that lets you style the internal components.
Based on this example you should be able to try:
/* LABEL STYLES */
.formInput label.Mui-focused
{
color: #057FA8 !important;
font-size: 18px;
font-family: Roboto, serif
}
/* INPUT FONT STYLES (on wrapper element not input directly) */
.formInput .MuiOutlinedInput-root
{
font-size: 18px;
font-family: Roboto, serif
}
/* BORDER COLOR */
.formInput .MuiOutlinedInput-root fieldset
{
border-color: #057FA8;
}
/* BORDER COLOR ON HOVER */
.formInput .MuiOutlinedInput-root:hover fieldset
{
border-color: #057FA8
}
/* BORDER COLOR ON FOCUS*/
.formInput .MuiOutlinedInput-root.Mui-focused fieldset
{
border-color: #057FA8
}
and
import styles from './Styles.module.css';
const classes = { root: styles.formInput };
const ExampleComponent = () => {
return (
<TextField
id="name"
name="name"
label="Name"
classes={classes}
margin='normal'
fullWidth
variant="outlined"
/>
)
}