MUI TextField sx props does not apply styles-CodePudding

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.

CodePudding user response：

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',
          }
        }}
      />

Working CodeSandbox: https://codesandbox.io/s/customizedinputs-material-demo-forked-jog26e?file=/demo.js

CodePudding user response：

What you need is "inputProps". Check if you wrap that sx correctly as an object instead of "="

<TextField size="small" inputProps={{sx:{
    padding: '1px 3px',
    fontSize: '0.875rem',
    lineHeight: '1.25rem'
 }}} />