MUI v5中ToggleButtonGroup按钮边框样式自定义问题

我已花费数小时尝试解决该问题仍未成功：正在使用MUI v5，想要把ToggleButton样式调整为普通MUI按钮样式，已经通过以下自定义主题代码完成了初始样式修改，但还有两个疑问需要解决：

import { createTheme } from "@mui/material/styles";

let theme = createTheme();

export const CustomTheme = createTheme(theme, {
  components: {
    MuiButton: {
      defaultProps: {
        disableRipple: true,
      },
    },
    MuiToggleButton: {
      defaultProps: {
        disableRipple: true,
      },
      styleOverrides: {
        root: {
          transition: "",
          width: "6.30rem",
          height: "2.3rem",
          textTransform: "capitalize",
          color: theme.palette.primary.main,

          "&:hover": { backgroundColor: "transparent" },
          "&.MuiButtonBase-root": { borderRadius: "1rem" },
          "&.MuiToggleButtonGroup-grouped": {
            borderRadius: "5px !important",
            border: "1px solid !important",
            borderColor: theme.palette.primary.light + " !important",
          },
          "&.Mui-selected, &.Mui-selected:hover": {
            color: "white",
            backgroundColor: theme.palette.primary.main,
            borderColor: theme.palette.primary.main,
            borderColor: theme.palette.primary.main + " !important",
          },
        },
      },
    },
  },
});

疑问1：替代!important修改MuiToggleButtonGroup-grouped边框的方案 #

不用!important的核心是提升样式选择器的特异性，或者直接在MuiToggleButtonGroup的styleOverrides中定义grouped样式——因为MUI默认的grouped样式就是在MuiToggleButtonGroup组件下定义的，我们在这里自定义的样式优先级和默认样式一致，不需要强制覆盖。

修改后的完整主题配置：

import { createTheme } from "@mui/material/styles";

let theme = createTheme();

export const CustomTheme = createTheme(theme, {
  components: {
    MuiButton: {
      defaultProps: {
        disableRipple: true,
      },
    },
    MuiToggleButton: {
      defaultProps: {
        disableRipple: true,
      },
      styleOverrides: {
        root: {
          transition: "",
          width: "6.30rem",
          height: "2.3rem",
          textTransform: "capitalize",
          color: theme.palette.primary.main,

          "&:hover": { backgroundColor: "transparent" },
          "&.MuiButtonBase-root": { borderRadius: "1rem" },
          "&.Mui-selected, &.Mui-selected:hover": {
            color: "white",
            backgroundColor: theme.palette.primary.main,
            borderColor: theme.palette.primary.main,
          },
        },
      },
    },
    // 新增MuiToggleButtonGroup的样式配置
    MuiToggleButtonGroup: {
      styleOverrides: {
        grouped: {
          borderRadius: "5px",
          border: "1px solid",
          borderColor: theme.palette.primary.light,
          // 选中状态的边框颜色统一处理
          "&.Mui-selected": {
            borderColor: theme.palette.primary.main,
          },
        },
      },
    },
  },
});

这样定义后，样式优先级足够覆盖默认样式，完全不需要用!important。

疑问2：定位MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:last-of-type)的方法 #

直接在MuiToggleButtonGroup的styleOverrides的root类中，嵌套目标选择器即可，因为root就是MuiToggleButtonGroup-root对应的类。

在上面的MuiToggleButtonGroup配置中添加如下代码即可：

MuiToggleButtonGroup: {
  styleOverrides: {
    root: {
      // 精准选中按钮组内非最后一个分组按钮
      "& .MuiToggleButtonGroup-grouped:not(:last-of-type)": {
        // 示例样式：取消右边框、调整左侧圆角
        borderRight: "none",
        borderRadius: "5px 0 0 5px",
      },
    },
    grouped: {
      borderRadius: "5px",
      border: "1px solid",
      borderColor: theme.palette.primary.light,
      "&.Mui-selected": {
        borderColor: theme.palette.primary.main,
      },
    },
  },
},

这样就能对按钮组中的特定子元素做样式自定义。

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