MUI library is a great library that offers a comprehensive suite of UI tools that helps ship new features faster.
Sometimes we would like to customize the default look and feel of MUI components, which might be a bit not straightforward, This article will demonstrate how to change the styles of the MUI text field component.
Let’s get started!
There are a few options we can use in order to customize the styles of MUI components in React, some of them are:
- Using a global class name.
- Using a rule name as part of the component’s
styleOverridesproperty in a custom theme.
In this article, we will cover one aspect of the styleOverrides options, which is to override the styles using the sx prop.
First, we need to create a new component for the text field, then we will pass the customized styles as props to this component so that we can re-use it for different use cases, let’s create CustomTextField.jsx file, and inside it, we will have the following implementation:
import * as React from 'react';
import TextField from '@mui/material/TextField';
export default function CustomTextField({ label = "default label" }) {
return (
<TextField
label={label}
/>
);
}
As shown above, we’ve created the CustomTextField which wraps the MUI TextField component.
How to change the root styles of MUI TextField
To override the root styles of the TextField which has the class name MuiTextField-root, we need to define our custom styles through the sx prop on the root level, as shown below:
import * as React from 'react';
import TextField from '@mui/material/TextField';
export default function InputField({ label = 'default label' }) {
return (
<TextField
label={label}
sx={{
backgroundColor: '#ffd60a',
border: '3px solid #001d3d',
}}
/>
);
}
That looks awesome! Let’s continue…
How to change the root styles of the MUI TextField label
We need to pass our custom styles using the sx prop through the prop InputLabelProps as the following:
import * as React from 'react';
import TextField from '@mui/material/TextField';
export default function InputField({ label = 'default label' }) {
return (
<TextField
label={label}
sx={{
backgroundColor: '#ffd60a',
border: '3px solid #001d3d',
}}
InputLabelProps={{
sx: {
color: '#003566',
textTransform: 'capitalize',
},
}}
/>
);
}
Looks good! We have the label color changed, and the text transformed to the Capitalize form.
How to change the styles of the MUI TextField input
The same applied here, to change the styles of the MUI TextField input, we need to pass the custom styles using the sx prop through the inputProps prop, as the following:
import * as React from 'react';
import TextField from '@mui/material/TextField';
export default function InputField({ label = 'default label' }) {
return (
<TextField
label={label}
sx={{
backgroundColor: '#ffd60a',
border: '3px solid #001d3d',
}}
InputLabelProps={{
sx: {
color: '#003566',
textTransform: 'capitalize',
},
}}
inputProps={{
sx: {
color: 'red',
paddingLeft: '15px',
fontSize: '20px',
},
}}
/>
);
}The above changes will result in the following UI:
How to change the styles of the MUI TextField Helper Text
MUI TextField helper text is usually used in case of communicating back to the user, such as reporting some input validations or errors.
We can use the property helperText to pass the message to the TextField, and by using the FormHelperTextProps we can pass our customized styles, as the following:
import * as React from 'react';
import TextField from '@mui/material/TextField';
export default function InputField({ label = 'default label' }) {
return (
<TextField
label={label}
sx={{
backgroundColor: '#ffd60a',
border: '3px solid #001d3d',
}}
InputLabelProps={{
sx: {
color: '#003566',
textTransform: 'capitalize',
},
}}
inputProps={{
sx: {
color: 'red',
paddingLeft: '15px',
fontSize: '20px',
},
}}
helperText="Please enter a valid input"
FormHelperTextProps={{
sx: {
color: 'red',
},
}}
/>
);
}
Now, let’s see how we can customize the styles on certain behaviors like hover, and focus.
How to change the border of the MUI TextField On Hover/On Focus
Between the input Default Label and the HelperText message, we have a border as shown below, and this border gets darker on hovering over it.
To customize the styles of this border onHover or onFocus we can do it by targeting the fieldset element from the InputProps prop (Note the difference between InputProps and inputProps), as the following:
InputProps={{
sx: {
'&:hover fieldset': {
border: '2px solid blue!important',
borderRadius: 0,
},
'&:focus-within fieldset, &:focus-visible fieldset': {
border: '4px solid red!important',
},
},
}}import * as React from 'react';
import TextField from '@mui/material/TextField';
export default function InputField({ label = 'default label' }) {
return (
<TextField
label={label}
sx={{
backgroundColor: '#ffd60a',
border: '3px solid #001d3d',
}}
InputLabelProps={{
sx: {
color: '#003566',
textTransform: 'capitalize',
},
}}
InputProps={{
sx: {
'&:hover fieldset': {
border: '2px solid blue!important',
borderRadius: 0,
},
'&:focus-within fieldset, &:focus-visible fieldset': {
border: '4px solid red!important',
},
},
}}
inputProps={{
sx: {
color: 'red',
paddingLeft: '15px',
fontSize: '20px',
},
}}
helperText="Please enter a valid input"
FormHelperTextProps={{
sx: {
color: 'red',
},
}}
/>
);
}Now once the user moves the mouse cursor over the input field, we can see the following styles applied:
And once the input is focused:
That’s It! If you want to customize more, you can target more elements in the same way we did in this article (like the input disabled state).
How to make MUI TextField re-usable
In order to achieve the re-usability, we can extract the styles into their variables and pass them as the default props to the TextField, and we can allow the users of the CustomTextField to pass their own styles, as the following:
import * as React from 'react';
import TextField from '@mui/material/TextField';
// 1- Default styles
const rootStyles = {
backgroundColor: '#ffd60a',
border: '3px solid #001d3d',
};
const inputLabelStyles = {
color: '#003566',
textTransform: 'capitalize',
};
const rootInputStyles = {
'&:hover fieldset': {
border: '2px solid blue!important',
borderRadius: 0,
},
'&:focus-within fieldset, &:focus-visible fieldset': {
border: '4px solid red!important',
},
};
const inputStyles = {
color: 'red',
paddingLeft: '15px',
fontSize: '20px',
};
const helperTextStyles = {
color: 'red',
};
export default function InputField({
label = 'default label',
// 2- User custom styles
customRootStyles,
customInputLabelStyles,
customRootInputStyles,
customInputStyles,
customHelperTextStyles,
}) {
return (
<TextField
label={label}
helperText="Please enter a valid input"
sx={{ ...rootStyles, ...customRootStyles }}
InputLabelProps={{
sx: {
...inputLabelStyles,
...customInputLabelStyles,
},
}}
InputProps={{
sx: {
...rootInputStyles,
...customRootInputStyles,
},
}}
inputProps={{
sx: {
...inputStyles,
...customInputStyles,
},
}}
FormHelperTextProps={{
sx: {
...helperTextStyles,
...customHelperTextStyles,
},
}}
/>
);
}Resources:
That’s It! Hope this article helps you in achieving your custom styles in MUI.
Photo from Unsplash.
