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

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

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