I have two react components.
- List container
- 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
Advertisement
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.children
instead of innerHtml
and by removing the “#” before red this works fine, see the sandbox