javascript - Material.io - 某些 Material 设计库的组件未正确呈现

Question

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

看起来 JS 根本没有得到应用

代码笔: 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>

代码笔链接:https://codepen.io/anon/pen/pKKPBK