MDC按钮波纹根本不绘制

Question

所以我使用 MDC（材料设计组件）而不使用 Node.js，这意味着我必须像这样导入它：

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

所以 CSS 工作得很好，我可以使用 MDC 中的任何类，并且它工作得完美。

但是JavaScript的附加效果存在一些部分问题。TextField 工作正常 - 当我单击它时，文本会发生变化。但任何其他 JS 效果都不起作用。

<label class="mdc-text-field mdc-text-field--outlined">

        <span class="mdc-notched-outline">

          <span class="mdc-notched-outline__leading"></span>

          <span class="mdc-notched-outline__notch">

            <span class="mdc-floating-label" id="my-label-id">OpenWeatherMap API key</span>

          </span>

          <span class="mdc-notched-outline__trailing"></span>

        </span>

        <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id" style="width: 512px;">

      </label>

      <br>

        <button class="mdc-button mdc-button--raised">

            <span class="mdc-button__label">Grant location permision</span>

          </button>

    <script>

            mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button')); <!-- This does not work>

            mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field')); <!-- This works fine>

        </script>

有人知道如何解决这个问题吗？我尝试了我发现的一切。

Answer 1

您需要mdc-button__ripple在按钮内添加元素：<button class="mdc-button mdc-button--raised">&nbsp; <span class="mdc-button__ripple"></span>&nbsp; <span class="mdc-button__label">Grant location permision</span></button>