Блог

Мне нужно создать класс CSS с медиа-запросами на основе входного изображения. Сценарий react для создания css должен выглядеть примерно так:

   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  
                }
            }`;
  }
  

Возможно ли добавить этот класс в документ в react?

Вот способ добавления ваших стилей с помощью тега style. Фактический метод основан на чем-то, показанном в документации для React Helmet. Это хороший способ перенести теги вашего стиля в заголовок документа, а не произвольно в середину dom.

Для тега style вам нужно использовать type="text/css" и использовать строку, чтобы не было синтаксических ошибок из-за недопустимости синтаксиса CSS в 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"/>