css 覆盖ToggleButtonGroup中第二个和第三个ToggleButton的右边框

bvjveswy  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(94)

我已经做了好几个小时了,我似乎不能让它工作。
我正在使用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",
          },
        },
      },
    },
  },
});

我在StackOverflow的某个地方找到了这个,我不记得在哪里了。我只是复制粘贴,它就工作了。
我无法确定如何针对此特定类:

问题:

1.除了在MuiToggleButtonGroup-grouped类上执行“!important”之外,是否有更好的方法来更改边框?
1.我怎样才能针对上面的类MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:last-of-type)并对它进行自己的更改呢?比如,如果我想在按钮组的“第n”个孩子上有不同的样式。

falq053o

falq053o1#

我可以通过这样的方式修复它:

MuiToggleButtonGroup: {
...theme.components?.MuiToggleButtonGroup,
styleOverrides: {
  grouped: {
    '&:not(:last-of-type)': {
      border: `1px solid ${theme.palette.brand.lightGray}`,
      borderRadius: 4,
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: 'transparent',
        border: `2px solid ${theme.palette.brand.slateBlue}`,
      },
    },
    '&:not(:first-of-type)': {
      margin: 'inherit',
      border: `1px solid ${theme.palette.brand.lightGray}`,
      borderRadius: 4,
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: 'transparent',
        border: `2px solid ${theme.palette.brand.slateBlue}`,
      },
    },
  },
},

},
我希望这个解决方案能解决你的问题。

相关问题