如何在react中设置嵌套组件的样式

Question

我使用嵌套组件编写了一个内容表。每个组件都是一个标头列表。

我想用缩进效果(左边距："20px"(为每个组件设置样式，以区分每个嵌套级别。

示例：

<Parent> 
-->indent <Child/>
-->indent   <Child2/>
-->indent    (etc.)
</Parent>

你知道如何动态地做吗？

这是我的代码：

import React from "react";
const TocContent = ({ props }) => {
return (
<div className="TOC">
{props.TOC.map((header) => (
<HeaderList key={header.objectId} header={header} props={props} />
))}
</div>
);
};
const HeaderList = ({ header, props }) => {
return (
<div>
<li
onMouseDown={(e) => e.stopPropagation()}
className="listing"
style={{}}
onClick={(e) =>
props.handleHeaderClick(
header.level,
header.treepath,
header.containsLaw,
header.sections,
header.secNum,
header.objectId,
header.id,
e.stopPropagation(),
)
}
>
{header._id}
</li>
{/* // if savedIndex === CurrentParent Index */}
{props.headerIndex === header.objectId &&
props.headers2.map((node2) => (
<HeaderList key={node2.objectId} header={node2} props={props} />
))}
{props.headerIndex2 === header.objectId &&
props.headers3.map((node3) => (
<HeaderList key={node3.objectId} header={node3} props={props} />
))}
{props.headerIndex3 === header.objectId &&
props.headers4.map((node4) => (
<HeaderList header={node4} key={node4.objectId} props={props} />
))}
</div>
);
};
export default TocContent;

Answer 1

在同时包含HeaderList的主要内容和子HeaderList组件(而不是现在的主要内容(的元素上加上边距(或填充(。具体来说，这将是div，它将所有其他返回的内容封装在HeaderList组件中。页边距将堆叠起来，每个嵌套的标题列表将比父列表缩进更多。

例如(只是HTML和CSS(：

.header-list {
margin-left: 20px;
}

<div class="header-list">
First Element
<div class="header-list">
Second Element
<div class="header-list">
Third Element
</div>
</div>
</div>