How to override MuiInputLabel outlined in mui 5

user_13912567 0
Viewed 1259

I am migrating from material-ui 4 to mui 5 and I want to override MuiInputLabel in theme override.

This is what I have done already is:

 'MuiInputLabel': {
  'styleOverrides': {
    'marginDense': {
      'lineHeight': '1.5px',
      'fontSize': typography.caption.fontSize,
    },
    'outlined': {
      'transform': 'translate(1.4rem, 0.9rem) scale(1)',
      '&.marginDense': {
        '&.shrink': {
          'transform': 'translate(15px, 0px) scale(1.05)',
          'fontSize': '11px !important',
        },
      },
    },
}}

I have tried changing the names of the props, but something is off, although the root styles are being applied but the outlined object's transform property is what I want to be applied.

In the current scenario the outlined and marginDense are not being applied but if I put them inside the defaultProps object the MuiInputLabel-outlined class appears in DOM but I cannot see the styles for it in the browser.

material-ui reactjs
1 Answers

If anyone is still interested how to do this, this is how it should be done:

    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: '0.95rem',
        },
        shrink: {
          transform: 'translate(14px, -8px) scale(1) !important',
        },
        outlined: {
          transform: 'translate(14px, 16px) scale(1)',
        },
      },
    },

shrink is the part where input is focus or has some value, outlined is the default state with empty input

user_44348870
Related