I'm trying to style a TextField component in a one-off fashion using the sx
prop:
<TextField
size="small"
sx={{
padding: '1px 3px',
fontSize: '0.875rem',
lineHeight: '1.25rem',
}}
{...params}
/>
I'm using MUI v5. If I inspect the input element, the styles are not applied. What am I missing?
UPDATE: it seems the styles are actually added to the wrapper element via its generated class. But I need to style the input element.
I've also tried using inputProps
, but that did nothing at all.
You can style the constituent components by targeting their classes directly through sx
. For example:
<TextField
label="My Label"
defaultValue="My Value"
size="small"
sx={{
".MuiInputBase-input": {
padding: '1px 3px',
fontSize: '0.875rem',
lineHeight: '1.25rem',
}
}}
/>
Or directly via inputProps.sx
. For example:
<TextField
label="My Label"
defaultValue="My Value"
size="small"
inputProps={{
sx: {
padding: "1px 3px",
fontSize: "0.875rem",
lineHeight: "1.25rem",
color: "green",
},
}}
/>
Working CodeSandbox: https://codesandbox.io/s/customizedinputs-material-demo-forked-jog26e?file=/demo.js
For MUI 7, inputProps
is available via slotProps
, so you can pass custom styling via sx
a bit differently. For example:
<TextField
label="Outlined"
defaultValue="My Value"
size="small"
slotProps={{
inputLabel: {
sx: {
color: "red",
},
},
input: {
inputProps: {
sx: {
padding: "1px 3px",
fontSize: "0.875rem",
lineHeight: "1.25rem",
color: "green",
},
},
},
}}
/>
Working CodeSandbox: https://codesandbox.io/p/sandbox/sad-alex-x85h7v?file=%2Fsrc%2FDemo.tsx%3A13%2C7-36%2C9