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

【问题标题】：Dynamically applying style to an element which is set with dangerouslySetInnerHTML in reactJS将样式动态应用到在 reactJS 中使用 dangerouslySetInnerHTML 设置的元素
【发布时间】：2021-04-18 23:40:33
【问题描述】：

您好，我有一个场景，我需要将来自服务器的 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 }} />

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

我该怎么做？

【问题讨论】：

标签： javascript html css reactjs dangerouslysetinnerhtml

【解决方案1】：

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

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

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

【讨论】：