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.
Use MUI TextField InputProps to Set Width and Height
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
.
Here is the code for using TextField InputProps:
<TextField
sx={{
width: 300
}}
InputProps={{ sx: { height: 80 } }}
placeholder="SX + InputProps"
/>
The root component of the TextField is a FormControl. The sx
prop of the TextField applies its stylings to the FormControl. We can see in the DOM screenshot below the FormControl (the div with class MUIFormControl-root
) and the Input (the input element with class MuiInputBase-Input
).

The width is set with TextField prop sx={{width: 300}}
. We need to set the width on the outer FormControl. If we tried to set width on the Input then the component would not expand properly.
The height is set by passing sx: { height: 80 }
to the InputProps
prop. We have to directly set the height on the Input in order to force it to expand vertically. Sometimes we have to use trial and error to figure out how to style the components.
The benefit of this method is it did not require exploring the DOM or needing an Input CSS class name. We have direct access to the Input by using the TextField’s 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: