如何使用全局 CreateTheme 在 Material UI 5 的 TextField 中设置“禁用”类的样式?

2023-12-03

我想对 TextFiled 组件进行不同的样式设置,一旦禁用= {true},就会概述变体。 在 Material ui v.4 中捕获它的方式在 Material ui v.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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用全局 CreateTheme 在 Material UI 5 的 TextField 中设置“禁用”类的样式? 的相关文章

随机推荐