[styled] theme style overrides is overridden by variants

[siriwatknp]

Steps to reproduce

Take a look at a74419e.

Current behavior

The styles defined in theme.styleOverrides (without variants) are overridden by the Component's variants.

const OutlinedInputInput = styled('input', {
  name: 'MuiOutlinedInput',
  slot: 'Input',
})({
  padding: '16.5px 14px',
  variants: [
    {
      props: {
        size: 'small',
      },
      style: {
        padding: '8.5px 14px',
      },
    },
    {
      props: ({ ownerState }) => ownerState.multiline,
      style: {
        padding: 0,
      },
    },
    {
      props: ({ ownerState }) => ownerState.startAdornment,
      style: {
        paddingLeft: 0,
      },
    },
    {
      props: ({ ownerState }) => ownerState.endAdornment,
      style: {
        paddingRight: 0,
      },
    },
  ],
});

// theme
{
  themeArgs: {
    theme: {
      components: {
        MuiOutlinedInput: {
          styleOverrides: {
            input: {
              paddingLeft: 10,
            },
          },
        },
      },
    },
  },
}

See the generated CSS

Expected behavior

The generated CSS of theme.styleOverrides should come last.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: overrides