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

您需要创建style块并从变量中设置内容。

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

Answer 2

JSX确实支持样式块。看起来像这样：

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

请记住，它应该在return和

的旁边

style标签不应是兄弟姐妹

Answer 3

您可以使用dangerouslySetInnerHTML属性将CSS添加到<style />标签中，如下所示：

<style dangerouslySetInnerHTML={{
  __html: `
    .yourelement { 
      width:10px;
    }
  `
}} />

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

3 个答案: