Material UI Toggle Button Color - reactjs

Question

I am using the ToggleButton Group and ToggleButton components, but I cannot get the font color to be different than the background color. Right now I'm using a black body background and want the clicked/active button to have a white background with black text. I'm using themes to have a toggle. My buttons are setup like so:
import { ToggleButtonGroup, ToggleButton } from '#mui/material'
const Header = ({onScenario1Change, onScenario2Change, onScenario3Change }) => {
const [alignment, setAlignment] = useState('left')
const handleAlignment = (e, newAlignment) => {
setAlignment(newAlignment)
}
return (
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
variant="outlined"
color="primary"
>
<ToggleButton color="primary" value="left" onClick={onScenario1Change}>Scenario 1</ToggleButton>
<ToggleButton color="primary" value="center" onClick={onScenario2Change}>Scenario 2</ToggleButton>
<ToggleButton color="primary" value="right" onClick={onScenario3Change}>Scenario 3</ToggleButton>
</ToggleButtonGroup>
)
}
And my theme is setup like so:
import { createTheme } from "#mui/material/styles";
export const darkTheme = createTheme({
palette: {
primary: {
main: '#FeFeFe',
contrastText: '#000000'
},
background: {
default: '#000000',
},
divider: '#fefefe',
},
components: {
MuiToggleButton: {
"&.Mui-selected": {
color: "#000000",
backgroundColor: '#fefefe'
}
}
}
})
Ready to never use MUI again after this. Any help in figuring out this override would be greatly appreciated!!

Answer 1

Ok so I got it working after a few refactors.
Buttons had to have text color based on theme
Buttons also had to have the color={primary} prop removed
Theme had to include action: selectedOpacity, as well as root specified before Mui-selected.
&:hover also had to be added to make the hover effect match the selected look.
import { ToggleButtonGroup, ToggleButton, styled } from '#mui/material'
const Header = ({onScenario1Change, onScenario2Change, onScenario3Change, theme }) => {
const [alignment, setAlignment] = useState('left')
const handleAlignment = (e, newAlignment) => {
setAlignment(newAlignment)
}
let fill = theme ? '#000000' : "#fefefe"
const CustomToggle = styled(ToggleButton)({
color: fill
})
return (
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
variant="outlined"
color="primary"
>
<CustomToggle value="left" onClick={onScenario1Change}>Scenario 1</CustomToggle>
<CustomToggle value="center" onClick={onScenario2Change}>Scenario 2</CustomToggle>
<CustomToggle value="right" onClick={onScenario3Change}>Scenario 3</CustomToggle>
</ToggleButtonGroup>
)
}
export const darkTheme = createTheme({
palette: {
primary: {
main: '#FeFeFe',
contrastText: '#000000'
},
background: {
default: '#000000',
},
divider: '#fefefe',
action: {
selectedOpacity: .95
}
},
components: {
MuiToggleButton: {
styleOverrides: {
root: {
"&.Mui-selected": {
color: "#000000",
backgroundColor: '#fefefe'
},
"&:hover": {
color: '#000000',
backgroundColor: '#fefefe'
}
}
}
}
}
})
Hope this helps someone in the future!