So, I am basically having this problem where I am trying to change the font color of all the child elements inside a tag- direct or indirect.
I don't know if it shouldn't be inheriting that property but it is not working in my case. I am putting the style of the parent color:"white" but unless it is a direct child text it is not changing the color.

export const NgoBar = () => {
    return (
        <div style={{backgroundColor:"red", width: "55vw", margin:"auto", color:"white"}}>
            Some text
            <div style={{display:"flex",flexDirection:"column",backgroundColor:"red", padding:"10px"}}>
                <span>Some different text</span>
                <span>From somewhere</span>
            </div>
            <div></div>
        </div>
    )
}

This gives the result

It doesn't change the text of the children element - just the direct text of itself. And I find it a bit odd. So just to change the color of all the text inside a parent element, I have to go to all the element and add a personal styling to give it a white text. Just wanna know is it usual ? If yeah then how to turn all the text inside a parent element to white.

CodePudding user response：

In your way you apply color only to the current tag. It's an inline style. See below. Font color is inheritable:

.container {
    color: green
}

<div class="container"> Some text
  <div> <span>Some different text</span> <span>From somewhere</span> </div>
  <div></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Then try this:

.container div,
.container span {
    color: green
}