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

Question

我试图让一个特定的 class 在它的父 class 悬停时改变样式，在 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';
  }
});

Answer 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';
  }
});

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

How does this CSS converts into JSS?

javascript

css

jss