import {MDCTextField} from '@material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));@import "@material/textfield/mdc-text-field";<head>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<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>我正在学习使用 Material Design。我认为它像引导程序一样工作，这意味着有一个 CDN，然后你只需添加你需要的类，所以我从这个链接中获得了 CDN：https : //material.io/develop/web/docs/getting-started/
添加 CDN 后，我的 css 可以正常工作，但不能使用 JavaScript。在说明中它说：
...并实例化 JavaScript：
mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
如何实例化 Javascript？
我试图将这段代码放在脚本标签之间，但这没有用。我想我在这里缺少一些代码。
更新：JS CDN 似乎可以工作，但在每个组件中，我都会在此链接中获得 JavaScript 实例化的说明：https : //material.io/develop/web/components/input-controls/text-field/
从“@material/textfield”导入 {MDCTextField}；const textField = new MDCTextField(document.querySelector('.mdc-text-field'))
我的问题是我在哪里插入此代码以使组件工作。