Pass React component to CSS psuedo-element content attribute

Asked Apr 07 '21 at 16:21

Active Apr 07 '21 at 16:21

Viewed 354 times

I have a typescript file that builds css using Emotion.

Can I pass a custom React component to css psuedo-element content like this: This customReactComponent is an SvgImage wrapped as a ReactComponent.

  &:after {
    position: absolute;
    content: '${(<CustomReactComponent />)}';   
  }

Is it possible?

asked Apr 07 '21 at 16:21

Cute_Ninja

What happens when you try to pass it as above? – Anurag Srivastava Apr 07 '21 at 16:26
Code doesn't compile – Cute_Ninja Apr 07 '21 at 17:23
You might be able to use an `svg` as is, without a component - https://stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after – Anurag Srivastava Apr 07 '21 at 17:25
it is not possible to use `React` component as `content` according to [the mdn docs](https://developer.mozilla.org/en-US/docs/Web/CSS/content), however you can put your React component inside div and then use it in styles – StepUp Apr 07 '21 at 17:49

0 Answers0