Vanilla Javascript Material 组件 Web 缺少 Css 属性

Question

我正在测试 Material Components Web from their recommended CDN 和一些最小的简单自定义 Vanilla Javascript 以使其正常工作。

例如，我可以像这样遵循单行列表示例 showed here：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Single-line item</span>
      </li>
    </ul>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
      mdc.list.MDCList.attachTo(document.querySelector('.mdc-list'));
    </script>
  </body>
</html>

除 Css 样式外，一切正常。没有 height: 48px 设置到任何列表项，因此所有列表项看起来都非常折叠，根本没有填充。

在他们网站的在线示例中使用 Chrome Developer Inspector，我发现每个列表项的高度应为 48px。

为什么官方CDN中缺少样式Css？

注意：我不要求的东西

我没有使用任何 Js 框架：Vue、Angular、React、Web 开发服务器...只是普通的 Js。
我不是在问如何添加自定义 Css 来添加特定的缺失值（我知道该怎么做，我只是想避免这样做，因为它应该已经包含在库中）。我只是展示了一个缺少属性的简单示例。我想知道我是否遗漏了其他导入或其他内容。
我已经在生产中使用列表的 deprecated 版本，它工作正常，但我在这里尝试更新到推荐的新列表定义方式。

Answer 1

首先，我建议在 github 存储库上使用文档 - https://github.com/material-components/material-components-web/tree/master/packages/mdc-list:

List is currently being updated to better match the Material spec. As a result, there are two versions of List available: the deprecated old version and the new, future-proof version.

... there are differences in class names and DOM structure: the old version uses class names with a mdc-deprecated-list prefix (e.g., mdc-deprecated-list-item) whereas the new version uses the typical mdc-list prefix (e.g., mdc-list-item).

您引用的示例与已弃用的版本有关。您需要将 deprecated 添加到 class 名称，或者根据新文档对其进行更新。

这是使用新列表版本的更新代码：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <ul class="mdc-list">
      <li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__content">Single-line item</span>
      </li>
      <li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__content">Single-line item</span>
      </li>
      <li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__content">Single-line item</span>
      </li>
    </ul>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
      mdc.list.MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));
    </script>
  </body>
</html>

Vanilla Javascript Material 组件 Web 缺少 Css 属性

Vanilla Javascript Material Components Web have missing Css attributes

material-design

material-components-web