Styling CSS pseudoclasses in React

Question

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?

score 3 · Accepted Answer · answered Jan 26 '18 at 17:38

3

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

answered Jan 26 '18 at 17:38

Herman Starikov

2,636
15
26

score 0 · Answer 2 · answered Jan 26 '18 at 17:50

You can style-loader to your webpack config.

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

This adds CSS to the DOM by injecting a style tag, when you import any css in your component.

import style from './file.css'

Styling CSS pseudoclasses in React

2 Answers2