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

我使用嵌套组件对内容表进行了编码。每个组件都是一个标题列表

我想用缩进效果（左边距：“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;

从“React”导入React；
常量TocContent=（{props}）=>{
返回(
{props.TOC.map（（标题）=>(
))}
);
};
const HeaderList=（{header，props}）=>{
返回(
e.stopPropagation（）}
className=“列表”
样式={{}
onClick={（e）=>
props.handleheader单击(
页眉.level，
header.treepath，
头条，
标题.各节，
header.secNum，
header.objectId，
header.id，
e、 stopPropagation（），
)
}
>
{头。_id}

{/*//如果savedIndex==CurrentParent Index*/}
{props.headerIndex==header.objectId&&
道具.头像2.地图（（节点2）=>(
))}
{props.headerIndex2==header.objectId&&
道具.头像3.地图（（节点3）=>(
))}
{props.headerIndex3==header.objectId&&
道具.头像4.地图（（节点4）=>(
))}
);
};
导出默认内容；

在包含

标题列表

的主要内容和子

标题列表

组件（而不是现在的主要内容）的元素上添加边距（或填充）。具体来说，这将是

div

，它将所有其他返回的内容包装在

标题列表

组件中。边距将堆叠起来，每个嵌套的标题列表将比父列表缩进更多

例如（仅HTML和CSS）：

。标题列表{
左边距：20px；
}

第一要素
第二要素
第三要素

使用CSS类选择器是否存在任何问题？例如

Parent>Child1>Child2{…}

。当然，您需要通过呈现的html进行选择，而不是尝试选择组件。不确定为什么，但在控制台中，我尝试时得到了“不支持的属性值”。左边距属性是删除线。由于某些原因，我无法使其工作。我添加了一个类名，或者直接添加了样式，但什么都没有发生。您是否有React（而不是Html）中的示例？Thanks@Dom355，你给哪个HTML元素起了类名？效果很好。很抱歉，我在我的CSS文件中实现您的解决方案时犯了一个错误。哦，很高兴听到这个消息。