设置 MUI ToggleButton 的选定背景颜色

Question

选择切换按钮时，我无法设置背景颜色。 现在，这些按钮可以工作，但在选择一个按钮时没有任何特定颜色。我想为 Btn 1 设置默认颜色，如果用户选择任何其他按钮，该按钮应该获得默认颜色。

<Grid container direction='column'>
        <ToggleButtonGroup
          value={title}
          exclusive
          size='small'
        >
          <ToggleButton onClick={this.handleOnClick}>
            Btn 1
          </ToggleButton>
          <ToggleButton onClick={this.handleOnClick}>
            Btn 2
          </ToggleButton>
          <ToggleButton onClick={this.handleOnClick}>
            Btn 3
          </ToggleButton>
      </ToggleButtonGroup>

      </Grid>

Answer 1

使用&.Mui-selected 选择器更改所选ToggleButton 的背景颜色。可以看到状态类列表here：

import MuiToggleButton from "@mui/material/ToggleButton";
import { styled } from "@mui/material/styles";

const ToggleButton = styled(MuiToggleButton)({
  "&.Mui-selected, &.Mui-selected:hover": {
    color: "white",
    backgroundColor: '#00ff00'
  }
});

如果你想提供一个选定的颜色道具：

const ToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({
  "&.Mui-selected, &.Mui-selected:hover": {
    color: "white",
    backgroundColor: selectedColor
  }
}));

<ToggleButton value="left" selectedColor="#00abc0">
  <FormatAlignLeftIcon />
</ToggleButton>