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

См. здесь , чтобы узнать, как импортировать стили, и здесь , чтобы узнать, как автоматически создавать экземпляры 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