javascript - 将样式动态应用到在 reactJS 中使用 dangerouslySetInnerHTML 设置的元素

Question

嗨，我有一个场景，我需要在元素中添加来自服务器的 HTML 内容，并用蓝色设置电子邮件地址的样式。

来自服务器的 HTML 内容::

"<p>139, Sethiwan Tower,<br>
10th Floor, Pan Rd,<br>
Silom, Bang Rak,<br>
Bangkok 10500,<br>
Thailand
<br/>
<br/>
<strong>Call us</strong> <br/>
(Service hotline) +66 2 430 4077
<br/>
<br/>
<strong>Send us an email</strong> <br/>
<a href="mailto:device-info@bolttech.co.th" target="_blank" rel="noopener noreferrer">device-info@bolttech.co.th</a></p>"

我在前端的 DIV 标记中设置此内容，如下所示：

<div dangerouslySetInnerHTML={{ __html: html }} />

我想让电子邮件地址变成红色。

我怎样才能做到这一点 ？

Answer 1

.myClass > p > a {
  color: red;
}

<div className="myClass" dangerouslySetInnerHTML={{ __html: html }} />

dangerouslySetInnerHTML将呈现html就好像它是您的div. 所以从那里你只需要找出正确的 CSS 选择器来定位a元素。