Javascript MDC按钮纹波根本不画

因此，我使用的MDC（Material design components）没有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附加效果存在一些局部问题。文本字段工作正常-当我单击它时，文本会移动。但任何其他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>

OpenWeatherMapAPI密钥


授予位置许可
mdc.ripple.mdcriple.attachTo（document.querySelector（'.mdc button'） 您需要在按钮内添加
mdc-button\u ripple
元素：


授予位置许可
您需要在按钮内添加
mdc-button\uu ripple
元素：


授予位置许可
你已经明白了吗？我也有同样的问题，你知道了吗？我也有同样的问题。