How to style ButtonGroup with variant='text' in Material UI? - reactjs

Question

I am trying to change the colour of my Buttons nested inside a ButtonGroup. I want to change the text colour as well as the "|" lines in between the buttons. I have tried overriding every class that I could find using the developer's console through styled but none of them had any effect.
const SortOptionButtonGroup = styled(ButtonGroup)({
'& .MuiButtonGroup-root': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-text': { color: pageColor, borderColor: pageColor },
});
const SortOptionButton = styled(Button)({
'& .MuiButton-root': { color: pageColor, borderColor: pageColor },
'& .MuiButton-text': { color: pageColor, borderColor: pageColor },
'& .MuiButton-textPrimary': { color: pageColor, borderColor: pageColor },
'& .MuiButton-sizeMedium': { color: pageColor, borderColor: pageColor },
'& .MuiButton-textSizeMedium': { color: pageColor, borderColor: pageColor },
'& .MuiButtonBase-root': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-grouped': { color: pageColor, borderRight: pageColor },
'& .MuiButtonGroup-groupedHorizontal ': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-groupedText': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-groupedTextHorizontal': { color: pageColor, borderColor: pageColor },
'& .MuiButtonGroup-groupedTextPrimary': { color: pageColor, borderColor: pageColor },
});
I am using v5.4.1.

Answer 1

You want to do it like so:
use .MuiButtonGroup-grouped to control the style the ButtonGroup children, regardless of the variant. If you'd like to be more specific, you can use a class based on the current variant instead. For example,
.MuiButtonGroup-groupedText when variant is text.
use not(:last-of-type) pseudo class to customize style of all but last buttons borders (i.e the buttonGroup dividers).
The final code look like this:
import * as React from "react";
import Button from "#mui/material/Button";
import ButtonGroup from "#mui/material/ButtonGroup";
import { styled } from "#mui/material/styles";
const StyledButtonGroup = styled(ButtonGroup)({
// change the text color for all buttons
'& .MuiButtonGroup-grouped': {
color: "green",
},
// change the button group dividers color
'& .MuiButtonGroup-grouped:not(:last-of-type)': {
borderColor: "red"
}
});
export default function VariantButtonGroup() {
return (
<StyledButtonGroup variant="text">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</StyledButtonGroup>
);
}
You can see a demo of it in this codesandbox.

Answer 2

You can change inner button styles (color, background-color, etc) directly through styled:
const StyledButton = styled(Button)({
color: '#ff0000',
backgroundColor: '#00ff00'
})
The divider line between buttons is implemented as buttons' border, so to change it, you should style button border inside ButtonGroup. You can do something like this:
const StyledButtonGroup = styled(ButtonGroup)({
"& .MuiButtonGroup-grouped:not(:last-of-type)": {
borderColor: "#ebc200"
}
});
Here's an example sandbox