如何在material.io（mdc-list）中添加嵌套列表

Question

我在我的React项目中添加了material.io。我的项目中需要一个嵌套列表。我使用mdc-list类创建列表。现在如何在mdc-list中添加嵌套列表。这是我创建mdc列表的代码。

        <ul className="mdc-list">
          <li
            className="mdc-list-item mdc-list-item--activated"
            href="#"
            ariaSelected="true"
          >
            <span className="mdc-list-item__text">Inbox</span>
          </li>
          <li className="mdc-list-item " href="#">
            <span className="mdc-list-item__text">Inbox</span>
          </li>
          <li className="mdc-list-item" href="#">
            <span className="mdc-list-item__text">Outgoing</span>
          </li>
        </ul>

但是我想添加一个嵌套列表，例如

        <ul className="mdc-list">
          <li
            className="mdc-list-item mdc-list-item--activated"
            href="#"
            ariaSelected="true"
          >
            <span className="mdc-list-item__text">Inbox</span>
          </li>
          <li className="mdc-list-item " href="#">
            <span className="mdc-list-item__text">Inbox</span>
          </li>
          <li className="mdc-list-item" href="#">
            <span className="mdc-list-item__text">Outgoing</span>
            <ul className="mdc-list">
             <li className="mdc-list-item " href="#">
             <span className="mdc-list-item__text">Inbox</span>
             </li>
             <li className="mdc-list-item" href="#">
             <span className="mdc-list-item__text">Outgoing</span>
             </li>
            </ul>
         </li>
        </ul>