Reactjs 切换按钮组反应物料界面

我似乎无法从材质ui获取ToggleButtonselected属性来处理ToggleButton

我已经制作了一个StyledToggleButton作为来自MaterialUI的文档

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

const StyledToggleButton=withStyles({
根目录：{
fontFamily：“Arial”，
fontSize:'14px'，
线宽：“20px”，
字母间距：“0.25”，
颜色：“rgba（0,0,0,0.87）”，
填充：“15px 15px”，
textTransform:“无”，
宽度：“100%”，
“&$selected'：{//{
setAlignment（newAlignment）；
};
const children=[
{props.leftButtonContent}
,
{props.rightButtonContent}
,
];
返回(

鹿茸涂饰
维斯特格弗克林酒店
{儿童}
);
}
```

像我那样调用它，但选择：{}需要与根在同一树级别，解决方案如下：

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

---

你能提供一个在线演示吗？这可能会帮助其他人快速了解你面临的问题。

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