在 React 中动态创建 css 类

Question

我需要使用基于输入图像的媒体查询创建一个 CSS class。 创建 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  
                }
            }`;
  }

是否可以将这个class添加到react中的文档中？

Answer 1

这是一种通过样式标签添加 styles 的方法。 实际方法基于React Helmet文档中显示的内容。 这是将样式标签添加到文档头部而不是任意放置在 dom 中间的好方法。

对于样式标签，您需要使用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"/>