How to style 'disabled' class in TextField in Material UI 5 using global CreateTheme?

user_15255487 0
Viewed 1033

I want to style differently TextFiled component , variant outlined once disabled={true}. The way it was catched in material ui v.4 don't work in material ui v.5. I cannot also google the solution how to customize disabled version. Below You can see how it was styled in material ui4 and it worked, not it does not.

export const MainTheme: Theme = createTheme({
  components: {
    MuiInputLabel: {
        styleOverrides: {
            root: {
                fontSize: '13px',
                '&$focused': {
                    borderColor: '#000',
                },
                '&$disabled': {
                    color: '#724a4a',
                },
            },
        },
    },

    MuiInputBase: {
        styleOverrides: {
            root: {
                '&$disabled': {
                    '& fieldset.MuiOutlinedInput-notchedOutline': {
                        borderColor: 'transparent',
                        background: 'rgb(0 0 0 / 4%)',
                    },
                },
            },

            input: {
                height: 'unset',
                color: '#000000',
            },
        },
    },
  },

)}

material-ui reactjs
1 Answers

You can do it like this SandBox

const finalTheme = createTheme({
  components: {
    MuiTextField: {
      variants: [ // variants will help you define the props given by Mui and the styles you want to apply for it
        {
          props: { variant: 'outlined', disabled: true }, 
          style: {
            backgroundColor: 'green',
            color: 'red',
            fontSize: '5rem'
          }
        }
      ]
    }
  }
})




<ThemeProvider theme={finalTheme}>
  <TextField
    disabled
    id="outlined-basic"
    label="Outlined"
    variant="outlined"
  />
</ThemeProvider>

Reference : https://mui.com/customization/theme-components/#global-style-overrides

user_108246970
Related