The Material-UI TextField is composed of several subcomponents which can make styling a challenge. However, these subcomponents provide excellent functionality and customization. In this tutorial I will show exact code for styling the text alignment and color in the TextField.
We will target several MUI TextField default classes:
- MuiInputBase-root
- MuiFormLabel-root
- Mui-focused
I’ll show detailed DOM screenshots and full code for each section. If you are still using Material-UI v4, use the styling code below with the makeStyles hook and it will work just fine.
MUI TextField Text Align Right, Left, and Center
I will show how to align text in the TextField using InputProps and also with the sx prop at the the root level of the TextField.
InputProps is a useful prop that passes values to the Input component that helps compose the TextField. I can use InputProps to pass styling to the Input and avoid an extra level of nested selectors.
In the code below, I targeted the input element that renders as a child of the root div of the Input component within the TextField.
<TextField
InputProps={{
sx: {
"& input": {
textAlign: "center"
}
}
}}
placeholder="InputProps Only"
/>Simply set the value to "right" to get right alignment. Left is the default value.
The code below accomplishes the same styling using only the root level sx. It does not require the wrapping nested selector (.MuiInputBase-root) but I like using it to enhance the specificity of the selector.
<TextField
sx={{
"& .MuiInputBase-root": {
"& input": {
textAlign: "right"
}
}
}}
placeholder="SX Only"
/>MUI TextField Text Color
Material-UI TextField Text Color can be customized using either the root level sx or with InputProps. I chose to use a selector at the root level.
I targeted MuiInputBase-root with the nested selector. Notice the spacing between the & and the class name. This means the selector is looking for a child or the root element.
I used a theme color, but could also have passed a color name, hex value, or rgba value.
<TextField
sx={{
"& .MuiInputBase-root": {
color: 'primary.main'
}
}}
id="standard-basic"
label="Filled"
variant="filled"
placeholder="SX"
/>MUI TextField Label Color
The MUI TextField’s label is best customized with a nested selector in the root sx. We’ll target the MuiFormLabel-root class seen in the DOM screenshot below.
I passed a theme color to the color value, but could also have used a named color, hex, or rgba value.
I still wanted the default color of primary.main when the TextField was focused. MUI applies a class called Mui-focused on all the composing elements when the TextField has focused. This is very helpful and I used it to reset the value back to the default.
<TextField
sx={{
"& .MuiFormLabel-root": {
color: 'secondary.main'
},
"& .MuiFormLabel-root.Mui-focused": {
color: 'primary.main'
}
}}
id="standard-basic"
label="Filled"
variant="filled"
placeholder="SX"
/>Related Links
Here are additional useful resources about the Material-UI TextField:
