React Js - Styling innerHTML on component - Not working - Parent styling is overriding child styling

Question

I have two react components.

1. List container
2. List

The list needs to be inside the list container. Like so:

<Container  innerhtml={<List></List>}  ></Container>

The content of both components renders. However the styling of the child is overridden by the parents styling. (In this case, the background color)

This is the full code:

import React from "react";

export default function main() {
  return <div>

    <Container
      innerhtml={<List></List>}
    ></Container>

  </div>
}

function List() {

  return <div style={{ backgroundColor: "#red!important", height: "150px", width: "150px" }}>
    this is a list
</div>
}

function Container(props) {

  return <div  style={{ backgroundColor: "#94e49d38", height: "400px", width: "100vw-10px" }}>
    this is container
    {props.innerhtml}
  </div>
}

I think it may be a similar thing to this: Style not working for innerHTML in Angular

However I cant find a React equivalent.

How can I get the list style to work?

Thank you

Answer 1

By refactoring a bit your code I found this Solution:

export default function Main() {
  return (
    <div>
      <Container>
        <List></List>
      </Container>
    </div>
  );
}

function List() {
  return (
    <div style={{ backgroundColor: "red", height: "150px", width: "150px" }}>
      this is a list
    </div>
  );
}

function Container(props) {
  return (
    <div
      style={{
        backgroundColor: "#94e49d38",
        height: "400px",
        width: "100vw-10px"
      }}
    >
      {props.children}
    </div>
  );
}

by passing props.childreninstead of innerHtml and by removing the "#" before red this works fine, see the sandbox

Answer 2

import React from "react";

export default function Main() {
  return ( 
    <div>
      <Container>
          <List/>
    </Container>
  </div>
}

function List() {
  return ( 
   <div style={{ backgroundColor: "#75e936", height: "150px", width: "150px" }}>
     this is a list
   </div>
}

function Container(props) {
  return( 
  <div  style={{ backgroundColor: "#94e49d38", height: "400px", width: "100vw-10px" }}>
    this is container
    {props.children}
  </div>
 )
}

Answer 3

#red is an invalid property value. It should be red as shown below.

backgroundColor: " red !important"

Answer 4

You put hashtag which is not required.

Change from backgroundColor: "#red !important" to backgroundColor: "red !important"