Stencil集成material-components-web时Material样式不生效，求排查

导致Material样式未生效的核心原因有两个，对应解决方案如下：

1. SCSS样式引入不完整 #

你仅通过@include textfield.core-styles引入了文本框的基础核心样式，但浮动标签、线波纹等子组件的样式并未被编译输出。需要为每个依赖的子组件单独调用对应的样式混合宏：

@use "@material/floating-label";
@use "@material/line-ripple";
@use "@material/textfield";

// 引入文本框核心样式
@include textfield.core-styles;
// 引入浮动标签专属样式
@include floating-label.core-styles;
// 引入线波纹专属样式
@include line-ripple.core-styles;

.mdc-text-field {
  font-size: 24px;
}

原代码仅@use了模块但未调用样式混合宏，导致子组件的Material样式无法被加载。

2. 缺少Material组件的JavaScript初始化 #

Material Components Web的交互类组件（如填充式文本框）必须通过JS实例化才能激活完整样式与交互效果（比如浮动标签上浮、波纹触发）。需要在组件中添加初始化逻辑：

首先确保安装了对应依赖：

npm install @material/textfield

然后修改组件代码：

import { Component, h, Element, componentDidLoad, disconnectedCallback } from "@stencil/core";
import { MDCTextField } from "@material/textfield";

@Component({
  tag: "my-textfield",
  styleUrl: "my-textfield.scss",
  shadow: false,
})
export class MyTextfield {
  @Element() el: HTMLElement;
  textfieldInstance?: MDCTextField;

  componentDidLoad() {
    // 初始化文本框组件实例
    const textfieldEl = this.el.querySelector('.mdc-text-field');
    if (textfieldEl) {
      this.textfieldInstance = new MDCTextField(textfieldEl);
    }
  }

  disconnectedCallback() {
    // 销毁实例避免内存泄漏
    this.textfieldInstance?.destroy();
  }

  render() {
    return (
      <label className="mdc-text-field mdc-text-field--filled">
        <span className="mdc-text-field__ripple"></span>
        <input
          type="text"
          className="mdc-text-field__input"
          aria-labelledby="my-label"
        ></input>
        <span className="mdc-floating-label" id="my-label">
          Label
        </span>
        <span className="mdc-line-ripple"></span>
      </label>
    );
  }
}

最后确认Stencil配置文件（stencil.config.ts）已正确配置sass插件：

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

export const config: Config = {
  plugins: [sass()],
  // 其他配置项...
};

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