javascript - 伪元素选择器下的属性“内容”被错误解析

Question

预期行为： 我已经在 Next.js 项目中实现了 JSS。我需要使用伪选择器/元素，因为我想在我的 div 上设置纵横比。

描述错误： 当我尝试使用像 ':before' 或 ':after' 这样的伪元素选择器时，它们被错误地解析，但仅在第一次渲染时。快速刷新/热重新加载后一切正常。

gridItem: {
      position: 'relative',

      '&::before': {
        display: 'block',
        content: '""',
        paddingBottom: 'calc(5/4 * 100%)',
        width: '100%',
      },
    },

被解析为

.gridItem-0-1-31::before {
  width: 100%;
  content: "
  &quot: ;
  display: table;
  opacity: 0;
  padding-bottom: calc(5/4 * 100%);
}

不知何故content，财产变得一团糟

content: "
&quot: ;

我试过了&:before，，，，&::beforecontent: '" "'content: '"..."'

版本：

• 反应-jss：10.7.1
• 浏览器：Chrome、Safari
• 操作系统：Mac

标签： javascriptnext.jsstylingpseudo-elementjss