MUI Select全局主题样式覆盖及sx属性失效问题咨询

我想给多个组件覆盖特定样式，目前TextField、ToggleButtonGroups等组件都生效，但MUI Select组件存在异常：

我当前的全局主题配置如下：

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里的样式能正常覆盖，但variants配置从未生效；另外，我尝试通过sx属性直接覆盖Select控件的样式：

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

同样无效果，border-radius仍保持styleOverrides中定义的10rem。请问这是Bug还是我对Select的配置有误？

问题分析与解决方案 #

1. Variants配置不生效的原因 #

MUI Select的size属性实际是传递给内部Input组件，而非直接作用于Select根元素。原variants写法没有正确穿透到目标元素，且样式优先级低于styleOverrides。

修改后的variants配置，通过类选择器精准定位目标元素：

variants: [
    {
        props: { size: 'small' },
        style: {
            '& .MuiSelect-select': {
                borderRadius: '0.4rem',
            },
            '& .MuiSelect-iconOutlined': {
                borderRadius: '0.4rem',
            },
        },
    },
],

2. sx属性不生效的原因 #

sx属性的样式优先级低于全局主题的styleOverrides，且Select的边框圆角实际由内部Input组件的notchedOutline伪元素控制，而非直接作用于Select根元素或select类。

正确的sx写法需定位到核心样式元素：

sx={{
    '& .MuiOutlinedInput-notchedOutline': {
        borderRadius: '0.4rem',
    },
    '& .MuiSelect-select': {
        borderRadius: '0.4rem',
        backgroundColor: theme.palette.grey[300],
    },
    '& .MuiSelect-iconOutlined': {
        borderRadius: '0.4rem',
    },
}}

3. 优先级与覆盖要点 #

• 全局styleOverrides优先级高于组件sx属性，非必要不使用!important
• 覆盖Select圆角需同时处理三个部分：
  • 内部Input的notchedOutline伪元素（边框容器）
  • Select的select类（下拉选择区域）
  • Select的iconOutlined类（下拉图标区域）

内容的提问来源于stack exchange，提问作者Laokoon