如何在react组件中指定样式块？

Question

我正在使用 React 组件生成电子邮件文本。我在指定这封电子邮件的样式时遇到问题。例如，在 HTML 中，我将其指定如下：

<div id="achievementMail">
  <style>
    #mailContent {
      margin: 10px;
      font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 1.33;
    }
  </style>
  <div id="mailContent">
    Dear players ... <br/>
  </div>
</div>

但是，由于 React 不允许样式并使用对象表示法，我不确定如何指定附加到电子邮件的样式。

谢谢。

Answer 1

JSX 确实支持样式块。它看起来是这样的：

const Margins = () => {
  return (
    <div className="Class">
      <style>{`
        .Class{
          background: orange;
        }
      `}</style>
    </div>
  )
}

请记住，它应该位于 thereturn和一侧

style标签不应该是同级标签