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

Question

I have render function set up something like this

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

I get the page as prop from external api and page.content.rendered will be html in string form, something like this :

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

is there a way to change the text color of all children inside the div element?

I tried adding color: "somecolor" to the outer div element, but nothing has changed.

Answer 1

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

Answer 2

You can style any parent element and it will apply to its children. https://reactjs.org/docs/dom-elements.html#style

For example:

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

There are many styling solutions that perform better and are well supported by the community: https://reactjs.org/docs/faq-styling.html

Answer 3

Styling in JSX is done the same way as in HTML, you can either create the class in an external CSS file and do something like this:

import './style.css';

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

or you can do inline styling like this:

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

Using inline styling in React is very strange in my opinion. I prefer to import a CSS file or use a library like Tachyons and use JSX className.

You can find more help from a similar post here .

Answer 4

I had a similar issue. In my case i had to change the color from white to black. since the html content already have color specified i was not able to change the color with just using the div's style property

I had to remove the color from the html content and to add black color using Js

Below could change the text color from white to black if the content already have text color

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