Search code examples
htmlcssreactjsjsxpseudo-class

Styling CSS pseudoclasses in React

I need to apply some CSS rules to ::before and ::after, but I can't figure out how.

I tried passing inline styles to my component like this (using JSX):

const color: '#fff';

const style = {
  '::before': { backgroundColor: color },
  '::after': { backgroundColor: color },
};

<div style={ style }>

I tried other permutations as well, such as ':before', '&::before', before... nothing seems to work.

Is this even supported by React? If so, what's the right way of doing it using inline styles?

Solution

  • react's inline styles don't support css pseudo-classes. Or media queries. You could either write plain css, or use a lib for that https://github.com/styled-components/styled-components