material-ui - 在 Material-UI 中 $active 是什么意思？

Question

当我使用 Material-UI 滑块并对其进行自定义时，我在文档中找到了这段代码：

const AirbnbSlider = withStyles({
  root: {
    color: '#3a8589',
    height: 3,
    padding: '13px 0',
  },
  thumb: {
    height: 27,
    width: 27,
    backgroundColor: '#fff',
    border: '1px solid currentColor',
    marginTop: -12,
    marginLeft: -13,
    boxShadow: '#ebebeb 0 2px 2px',
    '&:focus, &:hover, &$active': {
      boxShadow: '#ccc 0 2px 3px 1px',
    },
    '& .bar': {
      // display: inline-block !important;
      height: 9,
      width: 1,
      backgroundColor: 'currentColor',
      marginLeft: 1,
      marginRight: 1,
    },
  },
  active: {},
  track: {
    height: 3,
  },
  rail: {
    color: '#d8d8d8',
    opacity: 1,
    height: 3,
  },
})(Slider);

起初我以为这是一个错字，但通过查看 MUI 源代码，有几次&$active是使用的，而不是&:active. 我想知道它做了什么，因为我在 CSS 中没有发现 $ 的任何用途，并且没有发现与此 $active 状态相关的变量。

&:active和这里 和有什么不一样&$active？

谢谢你的时间！

标签： material-ui