反應更改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)")
   }}
/>