How to use pseudo elements in reactjs as inline styling?

Question

here am getting an image from props, I have to make that image as a background image for a particular element. I achieved this using styled-components. But in my app, we are not using styled components anywhere, so I am trying to achieve this using inline styles. Because it's dynamic we couldn't or may not be able to pass this image to the CSS file.

this is my method using styled-components, anyway to change this using inline styles, please help me with that, Thanks

Styled Components

const BannerImage = styled.div`
  &::after {
    background: url(${(props) => props.image}) no-repeat;
    content: '';
    background-size: cover !important;
    background-position: center center !important;
    right: 0;
    height: 100%;
    position: absolute;
    left: 0;
  }
  @media (min-width: 992px) {
    &::after {
      right: calc((-1%) - ((100vw - 992px) / 2));
    }
  }
`;

Element used styled component

<BannerImage
      image={image}
      className="col-lg-6 col-md-16 col-sm-12 col-12 h-100 d-flex"
 />

https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react This might help — Salomi Edward, Aug 10 '21 at 04:31

score 1 · Answer 1 · answered Aug 10 '21 at 04:33

While you can't directly style a pseudo element with inline styling you can set a CSS variable. Could you use that as a way to pass the background image url?

e.g.

   const myElement = document.querySelector('.myElement');
    myElement.style.setProperty('--bgurl', 'URL(' + the URL + ')');

and in the CSS

.myElement::after {
  background-image: --bgurl;
}

score 0 · Answer 2 · answered Aug 10 '21 at 04:16

For simple styles like background color, color, etc, you can use inline style directly without any library.

But for pseudo-class, pseudo-element, and media query, you have to use a library to implement inline styling.

There is a library called Radium https://github.com/FormidableLabs/radium to help that in React.

How to use pseudo elements in reactjs as inline styling?

2 Answers2