如何使用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放在样式标签中，它就可以正常工作。

- Jared Smith

Answer 1

你尝试的第一种方法应该可行，但你需要将content属性用引号再包裹一次，否则在生成的CSS中它将没有值（整个:after伪类由于content属性值错误而被CSS忽略）：

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

- ibrahim mahrir