MDC按钮涟漪效果无法渲染问题求助（非Node.js环境）

Let's troubleshoot and fix the ripple effect issue with your MDC button step by step:

Common Causes & Solutions #

1. Ensure Scripts and DOM Are Loaded in the Right Order

The most likely culprit is that your initialization code runs before either the MDC JS library is fully loaded or the button element exists in the DOM. Here's how to fix it:

• Add the defer attribute to your MDC JS script tag to ensure it loads after the DOM is parsed:

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

• Wrap your component initialization code inside a DOMContentLoaded event listener to guarantee it runs only after the entire DOM is ready:

  document.addEventListener('DOMContentLoaded', function() {
    // Check if the button exists before initializing
    const button = document.querySelector('.mdc-button');
    if (button) {
      mdc.ripple.MDCRipple.attachTo(button);
    }
    
    const textField = document.querySelector('.mdc-text-field');
    if (textField) {
      mdc.textField.MDCTextField.attachTo(textField);
    }
  });
  

2. Verify the Button Has Proper Positioning

MDC Ripple requires the target element to be a positioned element (relative, absolute, or fixed). Add position: relative to your button to ensure the ripple renders correctly:

<button class="mdc-button mdc-button--raised" style="position: relative;">
  <span class="mdc-button__label">Grant location permission</span>
</button>

3. Check Browser Console for Errors

Open your browser's developer tools (F12) and go to the Console tab. Look for errors like:

• mdc is not defined: Means the MDC JS library failed to load (check your network connection or CDN URL).
• Cannot read property 'attachTo' of undefined: Indicates the Ripple component isn't available in your MDC build (try using a specific version instead of @latest to avoid compatibility issues, e.g., @14.0.0).

Full Working Code Example #

<!DOCTYPE html>
<html>
<head>
  <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" defer></script>
</head>
<body>
  <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><br>
  <button class="mdc-button mdc-button--raised" style="position: relative;">
    <span class="mdc-button__label">Grant location permission</span>
  </button>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const button = document.querySelector('.mdc-button');
      if (button) {
        mdc.ripple.MDCRipple.attachTo(button);
      }
      const textField = document.querySelector('.mdc-text-field');
      if (textField) {
        mdc.textField.MDCTextField.attachTo(textField);
      }
    });
  </script>
</body>
</html>

These changes should resolve the ripple effect issue while keeping your TextField working as expected.

内容的提问来源于stack exchange，提问作者user11958848