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

Posted 2023-03-06

【中文标题】React Js - 在组件上设置 innerHTML 样式 - 不起作用 - 父样式覆盖子样式

【英文标题】：React Js - Styling innerHTML on component - Not working - Parent styling is overriding child styling

【发布时间】：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 等价物。

如何让列表样式起作用？

谢谢

【参考方案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