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.
![MUI TextFields with Centered Text and Custom Text Color](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2022/07/image-4.png?resize=257%2C161&ssl=1)
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.
![Material-UI TextField input element](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2022/07/image-5.png?resize=825%2C263&ssl=1)
<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:
![MUI TextField Placeholder Text in the DOM](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2023/03/image-15.png?resize=458%2C61&ssl=1)
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.
![MUI TextField Placeholder Color Example](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2023/03/image-16.png?resize=253%2C192&ssl=1)
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.
![MUI TextField label Child Element](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2022/07/image-6.png?resize=825%2C309&ssl=1)
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: