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

Question

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

但现在我们正在迁移到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伪将被 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: ""}，这是正确的。