如何在反应中设置嵌套组件的样式？

Question

I coded a table of content using nested components. Each component is a list of headers.

I want to style each component with an indentation effect (margin-left: "20px") to differentiate each level of nesting.

Example:

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

Any idea of how to do it dynamically?

Here's my code:

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

Put the margin (or padding) on the element that contains both the HeaderList 's main content and the sub- HeaderList components (instead of just the main content as you have now). Specifically this would be the div that wraps all other returned content in the HeaderList component. The margins will stack up and each nested header list will be more indented than the parent.

For example (just 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>