如何将实现父类hover时修改子类样式的CSS代码转换为JSS写法？

问题原因 #

1. 核心逻辑错误：JSS 规定，引用同一份 createUseStyles 配置内定义的其他类名规则时，必须添加 $ 前缀作为标识符。你在 &:hover 下直接嵌套写 customStyles，JSS 会将其识别为原生 HTML 标签选择器，无法匹配到你自定义的 customStyles 类对应的元素，因此样式不生效。
2. 语法错误：你原有代码中 customStyles 对象内的 background: 'white'; 末尾错误使用了分号，JS 对象的属性值后应使用逗号分隔，也可省略末尾分隔符。

正确实现代码 #

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

内容的提问来源于stack exchange，提问作者Yurdesou