javascript - return 中的样式标签 ()

Question

我想在我的 return()

react js 代码中有一个样式标签

return(
  <style> .mobile_view_svg_div{} 
                  `@media(max-width:600px){`
                    `.mobile_view_svg_div`
                    `{`
                        width:300px;
                    `}`
                   `} `
          </style>
          <div>
          <svg className="mobile_view_svg_div">
            svg code here.
          <svg>
          </div>
)

编译时出现错误

Syntax error: Unexpected token, expected }

任何帮助都会很棒。

Answer 1

您忘记在上面添加包装 div。这样，这样的样式应该可以工作。

我刚刚添加了一个红色背景，这样您就可以实际看到样式的效果；)

class App extends React.Component {
  render() {
    return (
      <div>
        <style>{`
          .mobile_view_svg_div {
            background-color: red;
          } 
          
          @media(max-width:600px) {
            .mobile_view_svg_div {
              width:300px;
            }
          }
        `}</style>
        <div>
          <svg className="mobile_view_svg_div">
            svg code here.
          </svg>
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

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