如何使用 Styletron 使用伪类设置伪元素的样式答案

【问题标题】：How to style a psuedo element with a pseudo class using Styletron如何使用 Styletron 使用伪类设置伪元素的样式
【发布时间】：2018-05-13 13:03:18
【问题描述】：

在尝试向按钮添加材料设计波纹动画时，我采用了纯 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 放在样式标签中，它就可以正常工作。

【问题讨论】：

标签： javascript css jss styletron

【解决方案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: '""' } 将产生类似于:after { content: ""} 的CSS，这是正确的。

【讨论】：