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: