Material.io - 某些材质设计库的组件未正确渲染

Question

我已经导入了材料设计库的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

有关如何导入样式，请参阅此处了解如何为不同的组件自动实例化 JavaScript 以进行material.io。对于文本字段，您必须在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