MDC Web Textfield 组件轮廓消失

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

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