Material.io - 一些材料设计库的组件没有被正确渲染

Question

我已导入Material Design 库的 css 和 js 文件，但由于某种原因，即使其下方的按钮组件显示正确，文本字段也无法正常工作。

看起来 JS 根本没有被应用

Codepen： https://codepen.io/x84733/pen/yEEbjK

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<style>@import url("https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css");</style>

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

<button class="foo-button mdc-button">Button</button>

text-field 组件代码取自文档： https://material.io/develop/web/components/input-controls/text-field/

Answer 1

请参阅here 了解如何导入样式，参考here 了解如何为material.io 的不同组件自动实例化 JavaScript。对于文本字段，您必须在 css 中导入以下代码：

@import "@material/textfield/mdc-text-field";

并将以下代码发送到您的js：

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

这是整体演示：

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

@import "@material/textfield/mdc-text-field";

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"/>

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

<button class="foo-button mdc-button">Button</button>

和codepen链接：https://codepen.io/anon/pen/pKKPBK