設置切換按鈕組 MUI 的選定顏色

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的顏色。 您可以 在此處查看狀態類列表：

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

const ToggleButton = styled(MuiToggleButton)({
  "&.Mui-selected": {
    color: "red"
  }
});

如果您想提供選定的顏色道具：

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

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

以下是如何使用createTheme （來自來源）設置ToggleButton的選定顏色。 請注意，從主題更改變量也會影響其他組件：

const theme = createTheme({
  palette: {
    text: {
      primary: "#00ff00"
    }
  }
});