Material Components Web - Persistent 和 Perminent Drawer 未按预期显示答案

【问题标题】：Material Components Web - Persistent and Perminent Drawer are Not Displayed as ExpectedMaterial Components Web - Persistent 和 Perminent Drawer 未按预期显示
【发布时间】：2017-10-22 04:09:34
【问题描述】：

我正在关注 Material Components Web docs。作为页面模板，我使用的是快速入门中详述的非常基本的模板 - 我的理解是这个模板是一个“包含所有”模板：它用： node_modules/material-components-web/dist/material-components-web.css 和， https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js （完整代码如下）

似乎 Persistent Drawer 和 Permanent Drawer 没有按预期显示。不可滑动，不可偏左，不可拉伸高度。

请注意，临时抽屉确实按预期工作。

我错过了什么？

<!DOCTYPE html>

网页材质组件

<aside class="mdc-persistent-drawer mdc-typography">
<nav class="mdc-persistent-drawer__drawer">
    <header class="mdc-persistent-drawer__header">
    <div class="mdc-persistent-drawer__header-content">
        Header here
    </div>
    </header>
    <nav id="icon-with-text-demo" class="mdc-persistent-drawer__content mdc-list">
    <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
    </a>
    <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
    </a>
    </nav>
</nav>
</aside>


<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
  <input type="text" class="mdc-textfield__input" id="demo-input">
  <label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
</div>


<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script>window.mdc.autoInit();</script>


<script>
    let drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('.mdc-persistent-drawer'));
    drawer.open = true;
</script>

【问题讨论】：

我发现问题 - 需要添加一些样式 - 为了按预期显示，意思是：向左，垂直拉伸 100% 高度，需要添加样式。样式可以从演示包中获取：material-components-web.appspot.com/drawer/…。另请注意演示中详细说明的添加到 body 元素的类。

标签： drawer material-components-web

【解决方案1】：

为了按预期显示，意思是：靠左，垂直拉伸100%高度，需要添加一些css样式。样式值可以从演示包中获取：here。另请注意添加到正文元素的类，如永久抽屉demo 中所述。

【讨论】：