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;`

如何缩进列表和子列表菜单？

1 个答案: