Question

在尝试向按钮添加材质设计波纹动画时，我采用了纯粹的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: '' }会导致看起来像:after { content: }的CSS错误。

':after': { content: '""' }将导致CSS看起来像:after { content: ""}这是正确的。

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

1 个答案: