Javascript React Js-在组件上设置innerHTML样式-不工作-父样式将覆盖子样式

我有两种成分

列表容器

名单

列表需要位于列表容器中。像这样：

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

从“React”导入React；
导出默认函数main（）{
返回
}
函数列表（）{
返回
这是一份清单
}
功能容器（道具）{
返回
这是集装箱
{props.innerhtml}
}

我认为可能与此类似：

然而，我找不到一个等价物

如何使列表样式生效

谢谢

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

backgroundColor: " red !important"

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

backgroundColor: " red !important"

---

您放置了不需要的hashtag

从

背景色：“红色！重要”

到

---

backgroundColor:“红色！重要”

您放置了不需要的标签

从

背景色：“红色！重要”

到

背景色：“红色！重要”

从“React”导入React；
导出默认函数Main（）{
报税表（
}
函数列表（）{
报税表（
这是一份清单
}
功能容器（道具）{
报税表（
这是集装箱
{props.children}
)
}

从“React”导入React；
导出默认函数Main（）{
报税表（
}
函数列表（）{
报税表（
这是一份清单
}
功能容器（道具）{
报税表（
这是集装箱
{props.children}
)
}

通过重构代码，我找到了以下解决方案：

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

导出默认函数Main（）{
返回(
);
}
函数列表（）{
返回(
这是一份清单
);
}
功能容器（道具）{
返回(
{props.children}
);
}

---

通过传递

props.children

而不是

innerHtml

，并删除红色前的“#”，这一切正常，通过重构一点代码，我找到了以下解决方案：

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

导出默认函数Main（）{
返回(
);
}
函数列表（）{
返回(
这是一份清单
);
}
功能容器（道具）{
返回(
{props.children}
);
}

---

通过传递

props.children

而不是

innerHtml

并删除“#”在红色此选项正常工作之前，请参见

尝试此选项。尝试此选项无效。此选项无效。谢谢，尽管无效。您可能会以不同方式创建组件？您建议如何？添加了另一个响应了解您，尽管此选项无效。您可能会以不同方式创建组件？您建议如何？添加另一个反应