MDC文本框不渲染

Question

我在上面创建了三个MDC文本字段和MDC按钮。但是，文本框不能正确呈现。从下图可以看到，右上角和左上角都有空隙。按钮起作用。下面是我的代码：

 <script>
        [].forEach.call(document.querySelectorAll('.mdc-text-field'), function(el) {
          mdc.textField.MDCTextField.attachTo(el);
        });
    </script>
<form method="POST" action="ingresoDB.php">
<div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField" >
            <input class="mdc-text-field__input" id="cedula" name="cedula">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label for="cedula" class="mdc-floating-label">C&eacute;dula</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
        </div>
        <label id="salida" style="color:red"></label>
        <br>
        <div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
            <input class="mdc-text-field__input" id="nombre" name="cedula">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label for="nombre" class="mdc-floating-label">Nombre</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
        </div>
        <br>
        <div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
            <input class="mdc-text-field__input" id="apellido" name="apellido">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label for="apellido" class="mdc-floating-label">Apellido</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
        </div>
        <input type="submit" class="mdc-button mdc-button--outlined" value="Ingresar"
            onclick="if(confirm('Grabar estos datos ?')){}else{return false;};" />
            </form>
        <button class="mdc-button mdc-button--outlined" onclick="window.location.href='principal.html'"> <span
            class="mdc-button__ripple"></span>REGRESAR</button>
        

enter image description here