У меня также была эта проблема раньше, вам просто нужно добавить следующую строку в ваш файл Javascript:
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
Этот код Javascript связывает эффект метки анимации CSS с вашим div .mdc-text-field, и это в следующем порядке:
<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">Label</label>
<div class="mdc-line-ripple"></div>
</div>
Вот почему вы не можете правильно видеть анимацию надписи в вашем компоненте.Я думаю, что документация MDC хороша, но плохо конкретизирована.
Если проблемы не исчезнут, скажите мне, и я проверю ваш вопрос как можно скорее, привет!
Редактировать: Я забыл сказать;чтобы получить все текстовые поля на вашем сайте, вы должны использовать:
const edtTexts = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
return new mdc.textField.MDCTextField(el);
});
Таким образом, вы получите массив с каждым div с class = "mdc-text-field" .С document.querySelector вы получите первый найденный объект.