如何縮進列表和子列表菜單？

Question

我正在嘗試設置列表和子列表菜單的樣式。 一些列表項具有名稱，一些列表項具有子列表項，在子列表項的前面添加了svg。 這樣做時，沒有子列表項的列表項未正確縮進。 我怎樣才能做到這一點。 有人可以幫助我。 下面是我嘗試過的。

   return (
            {this.props.expanded &&
            <Drawer className="drawer">
                <header>
                    <h4>List items</h4>
                </header>
                <ListItems listitemss={this.props.listitems} />
            </Drawer>
            }
        </div>
    );
};

}

class ListItemss extends React.PureComponent {
    render() {
        return <ul className="listitems_list">
            <div className="lists">
              {this.props.layers.map((list, index) => {
                return <List key={index} list={list} />
               })}
       </div>
       </ul>
 }    
}


class List extends React.PureComponent {
constructor(props) {
    super(props);
    this.state = {
        expanded: false,
        hidden: false,
    };
}

expand = () => {
    this.setState({expanded: true});
};

collapse = () => {
    this.setState({expanded: false});
};

hide_layer = () => {
    this.setState({hidden: true});
};

show_layer = () => {
    this.setState({hidden: false});
};

render() {
    return <li>
        <div className="list">
        {this.props.list.children && !this.state.expanded &&
        <SvgAccDown width="14" height="8" onClick={this.expand} />
        }
        {this.props.list.children && this.state.expanded &&
        <SvgAccUp width="20" height="18" onClick={this.collapse} />
        }
        <span>{this.props.list.name}</span>
        </div>
        {this.props.list.children && this.state.expanded &&
         <ListItems lists={this.props.list.children}/>
        }
        </li>;
}

}

.listitems_list {
height: 100%;
overflow: auto;

.lists {
    height: 100%;
    margin-left: 12px;
    overflow: auto;

    .list {
        background-color: #fff;

        display: flex;
        flex-direction: row;
        align-items: center;

        cursor: pointer;

        span { 
            padding-right: 12px;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 2px;
            font-size: 16px;
            font-weight: bold;
        }
    }
}

}

Answer 1

如果它是一個外部CSS文件，並且您正在使用類似Create React App的工具，則只需import 'mystyle.css ;`。