How to Set MUI TextField Text Alignment, Text Color, and Label Color

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:

• How to Change TextField Border Color in Material-UI
• Get Values, Set Values, and Default Values in the MUI TextField
• Understanding MUI Labels: TextField Labels, Input Labels, and Form Labels
• How to Set MUI TextField Height and Width: The 3 Best Ways

MUI TextField API