How to Set MUI TextField Height and Width: The 3 Best Ways

Material-UI provides several ways to style the height and width of TextFields, and you need to choose the correct way for your particular situation. I will show full code examples plus DOM screenshots for the following methods of adding height and width:

• Using just the sx prop
• Using InputProps
• Using the styled API

Width can be set at the root level, but height requires some knowledge of selectors and the compositional components within the TextField.

I also added breakpoints for width in the first example. If you are still using Material-UI v4, use the styling code below with the makeStyles hook and it will work just fine.

Here’s how to style text alignment and color in the MUI TextField.

Here’s a YouTube version of this post or watch below:

Set MUI Height and Width with ‘sx’ Prop

Perhaps the simplest way to set TextField width and height is to use only the sx prop.

First, set width at the root level. The width value could be as simple as width: 300 but I chose to add breakpoints to the tutorial.

Next, use a nested selector to target the MuiInputBase-root class and set a height value. This targets the appropriate div for setting height. If you target the Input element, then your height value will not take into account padding.

Here’s the code for this example:

<TextField
    sx={{
        width: { sm: 200, md: 300 },
        "& .MuiInputBase-root": {
            height: 80
        }
    }}
    id="standard-basic"
    label="Filled"
    variant="filled"
    placeholder="SX"
/>

Use the sx prop for one-off styling situations. If you need to style multiple TextFields the same way, consider creating a Styled Component and exporting it.

Set MUI Width and Height with ‘InputProps’

Another method for setting Material-UI TextField width and height is a combination of sx at the TextField root and passing sx styling values to the composing Input component via InputProps.

The width is set with TextField prop sx={{width: 300}}.

The height is set by passing sx: { height: 80 } to the InputProps prop. The benefit of this method is it did not require exploring the DOM or needing an Input CSS class name.

Here is the code for using TextField InputProps:

<TextField
    sx={{
        width: 300
    }}
    InputProps={{ sx: { height: 80 } }}
    placeholder="SX + InputProps"
/>

Set MUI Height and Width with the ‘styled’ API

If you need to style several TextFields with identical styling, consider creating a “Styled Component” that can be exported and reused.

To create a Styled Component TextField, use the styled API imported from @mui/system.

There are several options available in the styled API. In this example I will only use the name option. The actual styling code is identical to the sx example. Set width at the root level and target MuiInputBase-root with a nested selector to set the height.

import { styled } from "@mui/system";

const StyledTextField = styled(TextField, {
    name: "StyledTextField",
})({
    width: 300,
    "& .MuiInputBase-root": {
        height: 80
    }
});

//JSX
<StyledTextField variant="standard" placeholder="Styled API"/>

Related Links

Check out these other useful posts about the MUI TextField:

• How to Change TextField Border Color in Material UI
• Getting and Setting Values in the MUI TextField
• How to Clear MUI TextField and Input (And Add Clear Button)

MUI TextField API