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.

MUI TextFields with Centered Text and Custom Text  Color
MUI TextFields with Centered Text and Custom Text Color

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
Material-UI TextField input element
<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.

MUI TextField label Child Element
MUI TextField label Child Element

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:

MUI TextField API

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.