I've been working on this for a few hours now and I can't seem to get it right.
Currently, I'm using Mui v5 and trying to style the ToggleButtons to look like regular MUI buttons.
So far, I was able to achieve this transformation:
https://i.stack.imgur.com/YyA2x.png
starting from this initial state:
https://i.stack.imgur.com/9XRT5.png
by implementing the following custom theme:
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",
},
},
},
},
},
});
I came across this solution on StackOverflow, but unfortunately, I can't recall the exact source. I simply copied and pasted the code, and it worked like a charm.
However, I'm stuck at figuring out how to target this specific class:
https://i.stack.imgur.com/uSpBU.png
Queries:
- Is there a more elegant way to change the border without relying on "!important" for the
MuiToggleButtonGroup-groupedclass? - How can I specifically target the class
and customize its styling? For instance, if I wanted to specify a different style for the nth child of the button group.MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:last-of-type)