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 Placeholder Color
There are two methods we can use to add color to the placeholder text in the MUI TextField:
- Add placeholder color using InputProps
- Add placeholder styling with a nested selector in the
sx
prop
The placeholder text is actually an attribute on the HTML input element that is part of the TextField’s composition:

Both of the methods described above can be used to apply color styling to the input
element.
Here’s how to apply placeholder text color styling with the InputProps
prop:
<TextField
InputProps={{
sx: {
"& input": {
color: 'primary.main'
}
}
}}
placeholder="SX + InputProps"
/>
This is similar to our code for aligning the TextField’s text. We pass an sx
value to our input
using InputProps
.
Here’s how to us the root level sx
prop on the TextField to select the nested input
element:
<TextField
sx={{
"& input": {
color: 'green',
}
}}
placeholder="SX + InputProps"
/>
Neither of these options is superior. I like to use InputProps since it was created for the purpose of applying styling to the input.

Both of these techniques will also update the TextField’s text color. Keep in mind that they are affecting the placeholder text, not the label text. In the section below I show how to update label text.
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: