反应更改div内所有子项的字体文本颜色

Question

我已经设置了类似这样的渲染功能

<div
  dangerouslySetInnerHTML={{
     __html: page.content.rendered
   }}
/>

我从外部 api 获取页面作为道具， page.content.rendered将是字符串形式的 html，如下所示：

<div>
  <h2> this is title </h2>
  <p> hello </p>
</div>

有没有办法改变 div 元素内所有子元素的文本颜色？

我尝试将 color: "somecolor" 添加到外部 div 元素，但没有任何改变。

Answer 1

<div style={{"color": "red"}}>
  <h2> this is title </h2>
  <p> hello </p>
</div>

Answer 2

您可以设置任何父元素的样式，它将应用于其子元素。 https://reactjs.org/docs/dom-elements.html#style

例如：

<div
  style={{color:'red'}}
  dangerouslySetInnerHTML={{
     __html: page.content.rendered
   }}
/>

有许多样式解决方案性能更好，并得到社区的大力支持： https : //reactjs.org/docs/faq-styling.html

Answer 3

JSX 中的样式与 HTML 中的样式相同，您可以在外部 CSS 文件中创建类并执行以下操作：

import './style.css';

<div className='.myClass'
    dangerouslySetInnerHTML={{
    __html: page.content.rendered
   }}
/>

或者你可以做这样的内联样式：

<div style={{color:'red'}}
    dangerouslySetInnerHTML={{
    __html: page.content.rendered
   }}
/>

在我看来，在 React 中使用内联样式非常奇怪。 我更喜欢导入 CSS 文件或使用像 Tachyons 这样的库并使用 JSX className。

您可以在此处的类似帖子中找到更多帮助。

Answer 4

我有一个类似的问题。 就我而言，我不得不将颜色从白色更改为黑色。 由于 html 内容已经指定了颜色，因此我无法仅使用 div 的样式属性来更改颜色

我不得不从 html 内容中删除颜色并使用 Js 添加黑色

如果内容已经有文本颜色，下面可以将文本颜色从白色更改为黑色

<div
    dangerouslySetInnerHTML={{
    __html: page.content.rendered.split("rgb(255,255,255)").join("rgb(0,0,0)")
   }}
/>