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

Question

In attempting to add a material design ripple animation to a button I took a pure css implementation here and used it.

But now we're migrating to Styletron. How do I recreate this

.ripple-class {
  /* props */
}

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

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

in styletron? I've tried this

injectStyles(styletron, {
  // ripple-class props
  ':after': {
    // :after props
  },
  ':active:after': {
    // more props
  }
});

And

injectStyles(styletron, {
  // ripple-class props
  ':after': {
     // :after props
  },
  ':active': {
    ':after': {
       // more props
    }
  }
});

The button does not animate. If I just put the actual css in a style tag it works fine.

ibrahim mahrir · Accepted Answer · 2017-11-29T21:04:39.177

The first one you tried should work, but you have to double-wrap the content property in quotes otherwise it won't have a value in the resulting CSS (and the whole :after pseudo is then ignored by CSS for having a wrong value for the content property):

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

Because ':after': { content: '' } will result in CSS that look like this :after { content: } which is wrong.

Whereas ':after': { content: '""' } will result in CSS that look like this :after { content: ""} which is correct.

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

1 Answers1