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

Answer 1

You can customize ToggleButton as following

  export const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({

  "&.Mui-selected": {
   color: "#fff",
   backgroundColor: "#50B848",
    "&:hover": {
     color: "#fff",
     backgroundColor: "#50B848",
    },
  },
  "&:hover": {
   color: "#fff",
   backgroundColor: "#50B848",
 },
}));

Answer 2

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!