Material UI Toggle Button Color

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!!

[Your code is not reproduceable](https://stackoverflow.com/help/minimal-reproducible-example). If you want the community to help you quickly, then make sure that your question is obvious enough for others and contains reproduceable code. — , Feb 16 '22 at 18:15
Was trying to be concise, but added the rest of the react component. Thanks for the heads up — jbrundagejr, Feb 16 '22 at 18:35
[Does this answer your question?](https://stackoverflow.com/questions/63974150/material-ui-toggle-button-cant-change-background-color-when-selected) — , Feb 16 '22 at 18:38

jbrundagejr · Answer 1 · 2022-02-16T19:13:25.293

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!

Material UI Toggle Button Color

1 Answers1