javascript - 如何使用 Styletron 为带有伪类的伪元素设置样式

Question

在尝试向按钮添加 Material 设计波纹动画时，我采用了纯 css 实现 here并使用它。

但现在我们正在迁移到 Styletron .我如何重新创建这个

.ripple-class {
  /* props */
}

.ripple-class:after {
  /* props */
}

.ripple-class:active:after {
  /* props */
}

在 styletron 中？这个我试过了

injectStyles(styletron, {
  // ripple-class props
  ':after': {
    // :after props
  },
  ':active:after': {
    // more props
  }
});

和

injectStyles(styletron, {
  // ripple-class props
  ':after': {
     // :after props
  },
  ':active': {
    ':after': {
       // more props
    }
  }
});

按钮没有动画。如果我只是将实际的 css 放在样式标签中，它就可以正常工作。

Answer 1

您尝试的第一个应该可以工作，但是您必须将 content 属性用引号括起来，否则它在生成的 CSS 中没有值(以及整个 : after pseudo 被 CSS 忽略，因为 content 属性的值错误):

injectStyles(styletron, {
    // ripple-class props
    ':after': {
        content: '""',                  // '""' (literally "") is the value not '' (literally nothing)
        // :after props
    },
    ':active:after': {
        content: '""',
        // more props
    }
});

因为 ':after': { content: '' } 会导致 CSS 看起来像这样 :after { content: } 这是错误的。

而 ':after': { content: '""' } 将导致 CSS 看起来像这样 :after { content: ""} 这是正确的.