Material ui 如何在单击物料界面中的表头标签时添加连锁反应'；表端口标签'；类似于材质UI选项卡

我试图在Material UI中使用withStyles自定义TablePortLabel。我不明白当我们像点击标签或按钮一样点击它时，如何增加连锁反应。谁能帮我一下吗？提前谢谢

沙盒链接：

代码：

const CustomSortLabel = withStyles((theme: Theme) => ({
root: {
  // flexDirection: 'row-reverse',
  "&:focus": {
      "& $icon": {
        opacity: 0.5,
      }
    },
    '&$active': {
    
      '&& $icon': {
        opacity: 1,
      color:'#828190',
      width:'16px',
      height:'16px',
      top:'4px',
      left:'4px',
      transition: 'background 400ms',
      },
    },
    
  },
  icon: {

  "&:focus": {
    opacity: 0.5,
  },
 },

 active: {
  '&$active': {
      // backgroundColor: 'red',
      // color:'red',
      // && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
      '&& $icon': {
        opacity: 1,
        color:'#828190',
      
      },
    },
},


}))(TableSortLabel);