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

63 thoughts on “React Js – Styling innerHTML on component – Not working – Parent styling is overriding child styling”

Leave a Comment