typescript 全局主题中的MUISelect样式覆盖

zbq4xfa0  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(151)

我想覆盖多个组件的特定样式。目前,它适用于所有组件,但不适用于“选择”。
我在做的是:

MuiSelect: {
            styleOverrides: {
                select: {
                    background: themePalette.palette.background.paper,
                    marginLeft: '0rem',
                    borderRadius: '10rem',
                },
                iconOutlined: {
                    background: themePalette.palette.background.default,
                    color: themePalette.palette.primary.main,
                    borderRadius: '10rem',
                },
            },
            variants: [
                {
                    props: { size: 'small' },
                    style: {
                        borderRadius: '0.4rem',
                        select: {
                            borderRadius: '0.4rem',
                        },
                        iconOutlined: {
                            borderRadius: '0.4rem',
                        },
                    },
                },
            ],
        },

“styleOverrides”部分中的样式会像预期的那样被覆盖。但该变体从未被应用。对于TextField、ToggleButtonGroups等其他元素。它起作用了。但不知何故,它对精选不起作用。
另外,当我通过sx属性直接覆盖Select控件中的相同属性时,它不会被应用。

sx={{
            input: {
                borderRadius: '0.4rem',
            },
            select: {
                borderRadius: '0.4rem',
                backgroundColor: theme.palette.grey[300],
            },
            borderRadius: '0.4rem !important',
        }}

在这里我也没有任何影响。边界半径仍然保持不变,为'10rem',就像它在stylesOverrides中定义的那样。
这是一个bug,还是我对Select做错了什么?

lokaqttq

lokaqttq1#

主题 prop 中的stylesx与css选择器一起工作。不使用预定义插槽,如styleOverrides

sx={{
   '& .MuiSelect-select': {
      ...styles here,
      ...
   }
}}

相关问题