React Js - 在组件上设置 innerHTML 样式 - 不起作用 - 父样式覆盖子样式答案

【问题标题】：React Js - Styling innerHTML on component - Not working - Parent styling is overriding child stylingReact Js - 在组件上设置 innerHTML 样式 - 不起作用 - 父样式覆盖子样式
【发布时间】：2021-05-12 23:38:24
【问题描述】：

我有两个反应组件。

列表容器
列表

列表需要在列表容器内。像这样：

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

两个组件的内容都会呈现。然而，孩子的造型被父母的造型所覆盖。（本例中为背景色）

这是完整的代码：

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>
}

我觉得可能和这个类似：Style not working for innerHTML in Angular

但是我找不到 React 等价物。

如何让列表样式起作用？

谢谢

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

#red 是无效的属性值。它应该是红色，如下所示。

backgroundColor: " red !important"

【讨论】：

【解决方案2】：

你放了不需要的标签。

从 backgroundColor: "#red !important" 到 backgroundColor: "red !important"

【讨论】：

谢谢，虽然这也不起作用
也许你会以不同的方式创建你的组件？
你有什么建议？
添加了另一个回复

【解决方案3】：

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>
 )
}

【讨论】：

【解决方案4】：

通过重构你的代码，我找到了这个解决方案：

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>
  );
}

通过传递 props.children 而不是 innerHtml 并在红色之前删除“#”，这可以正常工作，请参阅 sandbox

【讨论】：