【问题标题】:Set selected background-color of MUI ToggleButton设置 MUI ToggleButton 的选定背景颜色
【发布时间】:2021-10-25 12:09:31
【问题描述】:

选择切换按钮时,我无法设置背景颜色。 现在,这些按钮可以工作,但在选择一个按钮时没有任何特定颜色。我想为 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>

【问题讨论】:

    标签: javascript reactjs material-ui


    【解决方案1】:

    使用&amp;.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>
    

    【讨论】:

    • &.Mui-selected 和 &.Mui-selected:hover 有什么用?我不懂语法。
    • @NehaChaudhary &amp; 表示当前组件(ToggleButton),&amp;.Mui-selected 表示处于选中状态的ToggleButton(可以看到其他状态的类名here)。 &amp;.Mui-selected:hover 表示悬停时选中的ToggleButton,可以根据需要更改为不同的颜色。
    • 在我的情况下,我无法修复选定的颜色。不知道出了什么问题。你能检查一下吗? codesandbox.io/s/…
    • @NehaChaudhary 您的代码无法正常工作,因为未选择按钮。您需要通过声明 value 属性来指定每个按钮的值:&lt;ToggleButton value='Day'。我为你修复了代码框here
    猜你喜欢
    • 2018-12-18
    • 2017-02-16
    • 2015-03-04
    • 1970-01-01
    • 1970-01-01
    • 2022-10-22
    • 1970-01-01
    • 2019-04-29
    • 1970-01-01
    相关资源
    最近更新 更多