这个 CSS 是如何转换成 JSS 的？答案

【问题标题】：How does this CSS converts into JSS?这个 CSS 是如何转换成 JSS 的？
【发布时间】：2021-10-11 14:21:20
【问题描述】：

我试图让一个特定的类在其父类悬停时更改样式，在 CSS 中是这样的：

.App:hover customButton {
  background: black;
}

我尝试在 JSS 中这样做，但没有成功：

export const appStyles = createUseStyles({
  app: {
    width: '90vw',
    height: '90vh',
    margin: '0 auto',
    background: 'blue',
    fontFamily: 'Gill Sans',
    '&:hover': {
      customStyles: {
        background: 'black'
      }
    }
  },
  customStyles: {
    background: 'white';
  }
});

【问题讨论】：

标签： javascript css jss

【解决方案1】：

确保您使用的是nested plugin，然后使用$ 引用另一个本地规则：

export const appStyles = createUseStyles({
  app: {
    width: '90vw',
    height: '90vh',
    margin: '0 auto',
    background: 'blue',
    fontFamily: 'Gill Sans',
    // ------v  Note the "$" here
    '&:hover $customStyles': {
      background: 'black'
    }
  },
  customStyles: {
    background: 'white';
  }
});

【讨论】：