React div中所有子级的更改字体文本颜色

Question

我已经设置了渲染功能

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

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

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

是否可以更改div元素内所有子级的文本颜色？

我尝试在外部div元素中添加颜色：“ somecolor”，但没有任何改变。

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。

您可以从类似的帖子here中找到更多帮助。