MDC Web文本字段组件大纲正在消失

Question

MDC web文本字段组件出现问题。问题是，当我点击文本字段输入时，大纲不会停留。请参阅下面的pug和javascript代码：

div.mdc-layout-grid__cell--span-4.mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-tablet
label.mdc-text-field.mdc-text-field--filled
span.mdc-text-field__ripple
span.mdc-floating-label(id="first_name") First Name :
input.mdc-text-field__input(type="text" aria-labelledby="first_name")
span.mdc-line-ripple
div.mdc-layout-grid__cell--span-4.mdc-layout-grid__cell--span-12-phone.mdc-layout-grid__cell--span-12-tablet
label.mdc-text-field.mdc-text-field--outlined
span.mdc-notched-outline
span.mdc-notched-outline__leading
span.mdc-notched-outline__notch
span.mdc-floating-label(id="last_name") Surname :
span.mdc-notched-outline__trailing
input.mdc-text-field__input(type="text" aria-labelledby="last_name")

const textFields = [].map.call(document.querySelectorAll('.mdc-text-field'), function (el) {
return new mdc.textField.MDCTextField(el);
});
const notchedOutline = [].map.call(document.querySelectorAll('.mdc-notched-outline'), function (el) {
return new mdc.notchedOutline.MDCNotchedOutline(el);
});
const floatingLabel = [].map.call(document.querySelectorAll('.mdc-floating-label'), function (el) {
return new mdc.floatingLabel.MDCFloatingLabel(el);
});
const lineRipple = [].map.call(document.querySelectorAll('.mdc-line-ripple'), function (el) {
return new mdc.lineRipple.MDCLineRipple(el);
});
```[![enter image description here][1]][1]

[1]: https://i.stack.imgur.com/E8t9g.png

Answer 1

网站的原色是白色，这让它看起来好像消失了，而实际上它只是白色。当您更改网站的原色时，它也会反映在文本字段上。