材质 UI 切换按钮颜色

Question

我正在使用 ToggleButton Group 和 ToggleButton 组件，但我无法使字体颜色与背景颜色不同。现在我使用黑色主体背景，并希望单击/活动按钮具有带有黑色文本的白色背景。我正在使用主题进行切换。我的按钮设置如下：

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>
  )
}

我的主题设置如下：

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'
        }
     }
  }
}) 

准备好从此不再使用 MUI。任何帮助解决此覆盖问题的帮助将不胜感激！！

Answer 1

好的，经过几次重构后我让它开始工作了。

• 按钮必须具有基于主题的文本颜色
• 按钮还必须删除

  color={primary}

  支柱
• 主题必须包含

  action: selectedOpacity

  ，以及在

  Mui-selected

  之前指定的根。
还必须添加

• &:hover

  以使悬停效果与所选外观相匹配。

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'
          }
        }
      }
    }
  }
})

希望这对将来的人有帮助！

Answer 2

您可以自定义ToggleButton如下

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

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