如何使用Styletron使用伪类对psuedo元素进行样式设计

Question

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

但现在我们要迁移到史泰龙了。我该如何重现这个？

.ripple-class {
  /* props */
}

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

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

在程式机里？我试过了

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伪值就会因为content属性的值错误而被忽略)：

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

因为':after': { content: '' }会产生类似于这个:after { content: }的CSS，这是错误的。

而':after': { content: '""' }会产生类似于这个:after { content: ""}的CSS，这是正确的。