htmlcssreactjsmaterial-uijsx

MUI TextField sx props does not apply styles


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.


Solution

  • MUI 5

    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

    Update for MUI 7

    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