How to Customize Material-UI TextField Text Color, Alignment, Width and Height

Material-UI is a fantastic React Component library. Customizing the components, especially TextField, often does not feel so fantastic.

***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. If you are using MUI v5, simply insert the styling code directly into the sx prop instead of using makeStyles and classes. I am working on updating my articles, but until I’m finished, read my guide to the MUI sx prop to learn more.

Full code (github gist) link is in the Resources section.

TextField is composed of smaller Material-UI components: primarily FormControl, InputLabel, and Input. Additional subcomponents may be involved depending on the TextField variant specified. Read more about the different MUI Form subcomponents here.

Take a look at the DOM elements generated by a simple TextField. The div with class MuiFormControl-root and everything under it comes courtesy of a single <TextField> tag.

Image for post

We’ll dive into the code below. If you want examples of how to customize different TextField variants and states, take a look at this article.

I will use Styled Components to override the existing TextField component. The customization in this article could also be accomplished through classes, and examples of that technique can be found in the variants and states customization article above. Gist is embedded at the end of the article.

Width

Width requires the least specific targeting. Simply update the root, which is really targeting the MuiFormControl-root class in the DOM hierarchy above.

const StyledTextField = withStyles((theme) => ({
root: {
width: 300
}
}))(TextField);

Text Color and Height

To set text color, we must target the subcomponent that actually contains the text: the Input component. We accomplish this with the syntax below.

const StyledTextField = withStyles((theme) => ({
root: {
width: 300,
"& .MuiInputBase-root": {
color: theme.palette.primary.main,
height: 60
}
}
}))(TextField);

Let’s break down the syntax of "& .MuiInputBase-root . The space between ‘&’ and ‘.’ means that the targeted class is on a child component. The ‘.’ indicates we are targeting a component with a class named ‘MuiInputBase-root’. Looking at the DOM snapshot above, I could instead have targeted ‘MuiInput-root’ or ‘MuiInput-underline’, either of these work.

Height is also applicable to the Input component. If we set the height in root, it would have applied to the FormControl component, increasing its height but not increasing the height of the Input component, which is probably not what most people want.

Text Alignment

Let’s right align the text within the Input component:

const StyledTextField = withStyles((theme) => ({
root: {
margin: theme.spacing(2),
width: 300,
"& .MuiInputBase-root": {
color: theme.palette.primary.main,
height: 60,
"& input": {
textAlign: "right"
}
}
}
}))(TextField);

The MUI Input component creates a <div> and with an<input> element inside it in the DOM. In the above code snippet, we target that child <input> element.

Label Text Color

For good measure, let’s set the color of the TextField’s label.

const StyledTextField = withStyles((theme) => ({
root: {
margin: theme.spacing(2),
width: 300,
"& .MuiInputBase-root": {
color: theme.palette.primary.main,
height: 60,
"& input": {
textAlign: "center"
}
},
"& .MuiFormLabel-root": {
color: theme.palette.secondary.main
}
}
}))(TextField);

We step back to the root level and target the child element with class ‘MuiFormLabel-root’.

Resources:

Are you looking for training in Material-UI? Check out my review of the best Material-UI course in Udemy, which has 40+ hours of content and a 30-day money back guarantee.

Gist: https://gist.github.com/Jon20111/84b17c484fcb6f50c768271124462dde#file-textfield-customization

Customization of different TextField variants (i.e. ‘notched’) and different states (i.e. hover) can be found here.

If you want an advanced topic on styling, learn how to use ::before and ::after pseudo-elements to style a TextField.

The Autocomplete component commonly uses TextField as its renderInput component. This is a situation where understanding TextField customization can help in many parts of your UI. Read here to style font size, border, and hover for the Autocomplete component.

More on JSS rules here.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.