Dynamically create css classe in React

Question

I need to create a CSS class with media queries based on input image. The react script to create the css should look something like this:

  const getBackgroungImageSet = (image) => {
    return `.mycontainer {    
                background-image:url("${image}?mw=500"); // big image   
            }
            
            @media(max-width: 768px){
              .mycontainer {
                    background-image:url("${image}?mw=250"); // small image  
                }
            }`;
  }

Is it possible to add this class to the document in react?

Zachary Haber · Accepted Answer · 2020-10-26 14:07:21Z

Here's a way to add your styles via a style tag. The actual method is based on something shown in the docs for React Helmet. Which is a good way of getting your style tags to the document head instead of arbitrarily in the middle of the dom.

For the style tag, you need to use type="text/css" and use a string so that there aren't syntax errors due to CSS syntax not being valid in JSX.

function Example() {
  return (
    <div>
      <span>This should be purple</span>
      <br/>
      <span>This should have a blue border</span>
      <style type="text/css">{`
        span {
          color: purple;
        }
        span:nth-of-type(2){
          color: inherit;
          border: 2px solid blue;
        }
      `}</style>
    </div>
  );
}
ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"/>

Collectives™ on Stack Overflow

Dynamically create css classe in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related