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

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 伪被 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: ""} 这是正确的。

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

How to style a psuedo element with a pseudo class using Styletron

javascript

css

jss

styletron