我已经做了好几个小时了,我似乎不能让它工作。
我正在使用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”个孩子上有不同的样式。
1条答案
按热度按时间falq053o1#
我可以通过这样的方式修复它:
},
我希望这个解决方案能解决你的问题。