Question

我似乎无法从材质ui中获得ToggleButton selected 属性来在ToggleButton上使用。

我已经制作了StyledToggleButton作为Material Ui的文档。

const StyledToggleButton = withStyles({
  root: {
    fontFamily: 'Arial',
    fontSize: '14px',
    lineHeight: '20px',
    letterSpacing: '0.25',
    color: 'rgba(0, 0, 0, 0.87)',
    padding: '15px 15px',
    textTransform: 'none',
    width: '100%',
    '&$selected': { //<--this is my attempt as per documentation
      color: 'red !important',
      backgroundColor: 'red !important',
    },
    selected: {},
  },
})(ToggleButton);

我正在使用ToggleButtonGroup，并将ToggleButton作为孩子传递。我已经看过使用MuiTheme了，但是在这个例子中我不明白如何使它工作。

其余内容供您参考：

const StyledToggleButton = withStyles({
  root: {
    fontFamily: 'Arial',
    fontSize: '14px',
    lineHeight: '20px',
    letterSpacing: '0.25',
    color: 'rgba(0, 0, 0, 0.87)',
    padding: '15px 15px',
    textTransform: 'none',
    width: '100%',
    '&$selected': {
      color: 'red !important',
      backgroundColor: 'red !important',
    },
    selected: {},
  },
})(ToggleButton);

const StyledGroupButton = withStyles({
  root: {
    padding: '15px 15px',
    width: '100%',
  },
})(ToggleButtonGroup);

export default function ObjectViewCard(props) {
  const classes = useStyles();

  const [alignment, setAlignment] = React.useState('none');

  const handleChange = (
    event: React.MouseEvent<HTMLElement>,
    newAlignment: string,
  ) => {
    setAlignment(newAlignment);
  };

  const children = [
    <StyledToggleButton key={1} value="left">
      {props.leftButtonContent}
    </StyledToggleButton>,
    <StyledToggleButton key={2} value="right">
      {props.rightButtonContent}
    </StyledToggleButton>,
  ];
  return (
    <Card>
      <hr className={classes.divider}/>
      <div className={`row ${classes.rowContainer}`}>
        <div className="col-6">
          <span className={classes.header}>Velg visning</span>
        </div>
        <div className="col-6">
          <span className={classes.info}>
            <InfoOutlinedIcon className={classes.icon}/> Vis tegnforklaring
          </span>
        </div>
      </div>
      <StyledGroupButton value={alignment} exclusive onChange={handleChange}>
        {children}
      </StyledGroupButton>
    </Card>
  );
}
```

Answer 1

像我一样称呼它，但是选择了：{}需要和root处于同一树级别，这里是解决方案：

const StyledToggleButton = withStyles({
  root: {
    fontFamily: 'Arial',
    fontSize: '14px',
    lineHeight: '20px',
    letterSpacing: '0.25px',
    color: 'rgba(0, 0, 0, 0.87)',
    padding: '15px 15px',
    textTransform: 'none',
    width: '100%',
    '&$selected': {
      backgroundColor: 'rgba(33, 137, 214, 0.14)',
      color: 'rgb(26, 88, 159)',
      '&:hover': {
        backgroundColor: 'rgba(33, 137, 214, 0.14)',
        color: 'rgb(26, 88, 159)',
      },
    },
  },
  selected: {},
})(ToggleButton);

ToggleButtonGroup反应材质ui

1 个答案: