如何移除MUI Select按钮默认文本的右侧内边距（默认32px）

MUI Select组件的文本容器默认右侧有32px内边距，这是为适配原生下拉图标预留的空间。当你自定义IconComponent后，需要针对性覆盖这个默认样式，以下是可行的解决方法：

核心解决思路 #

默认内边距来自.MuiSelect-select类，直接在组件的sx属性中通过嵌套选择器覆盖该类的paddingRight属性，同时处理focus状态下的样式（默认focus时内边距会保留）。

修改后的组件代码 #

<FormControl>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={1}
    className={styles.customSelectRoot}
    IconComponent={() => <MyCustomIcon />}
    sx={{
      ".MuiOutlinedInput-notchedOutline": { border: 0 },
      paddingLeft: "10px",
      // 覆盖默认文本容器的右侧内边距
      "& .MuiSelect-select": {
        paddingRight: "10px",
      },
      // 覆盖focus状态下的右侧内边距
      "& .MuiSelect-select:focus": {
        paddingRight: "10px",
      },
    }}
  >
    <MenuItem value={1}>Monthly</MenuItem>
    <MenuItem value={2}>Yearly</MenuItem>
    <MenuItem value={3}>Days</MenuItem>
  </Select>
</FormControl>

原样式失效原因 #

你之前尝试的.MuiSelect-root .MuiSelect-select:focus选择器优先级不足，且未通过组件sx属性直接注入（sx的内联样式优先级高于外部className样式）。使用sx中的&嵌套选择器，能确保样式精准作用到目标元素。

若上述代码仍不生效，可在paddingRight后添加!important强制覆盖默认样式（仅在优先级冲突无法解决时使用）：

"& .MuiSelect-select": {
  paddingRight: "10px !important",
},
"& .MuiSelect-select:focus": {
  paddingRight: "10px !important",
},

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