如何使用全局CreateTheme在Material UI 5中设置TextField中禁用的类的样式？ [英] How to style 'disabled' class in TextField in Material UI 5 using global CreateTheme?

问题描述

我想以不同的方式设置TextFled组件的样式，一旦禁用VARIANT轮廓={TRUE}。 在材质UIv.4中捕捉它的方式在材质UIV.5中不起作用。我也不能在谷歌上搜索如何定制禁用版本的解决方案。 下面您可以看到它是如何在材质ui4中设置样式的，并且它可以工作，而不是不工作。

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

)}

推荐答案

您可以这样做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>

引用：https://mui.com/customization/theme-components/#global-style-overrides

这篇关于如何使用全局CreateTheme在Material UI 5中设置TextField中禁用的类的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！