我正在开发一个项目，尝试将 MDUI 组件（如按钮）集成到我的 Stencil Web 组件项目中。我已按照 MDUI 文档并将 MDUI CSS 和组件引入到我的项目中，但 MDUI 按钮未正确呈现。
这是我到目前为止所做的：
import { Component, Host, Prop, h } from '@stencil/core';
// Always import the CSS file
import 'mdui/mdui.css';
import 'mdui/components/button';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
@Prop()
variant: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' = 'filled';
@Prop()
disabled = false;
componentDidLoad() {
(window as any).mdui?.init();
}
render() {
return (
<Host>
<mdui-button variant={this.variant} disabled={this.disabled}>
<slot></slot>
</mdui-button>
<button
class={`mdui-btn mdui-btn-${this.variant}`}
disabled={this.disabled}
>
TEst
</button>
<div>Helloosssso, World!</div>
</Host>
);
}
}
:host {
display: inline-block;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<!-- MDUI CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdui/1.0.1/css/mdui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdui/1.0.1/js/mdui.min.js"></script>
<script type="module" src="/build/webcomponentsnext.esm.js"></script>
<script nomodule src="/build/webcomponentsnext.js"></script>
</head>
<body>
<my-component variant="filled" disabled="false"></my-component>
</body>
</html>
问题： 当我加载页面时，该按钮似乎没有以正确的 MDUI 样式或功能呈现。该按钮显示为普通 HTML 按钮，没有任何 MDUI 样式。
我尝试过的： 禁用影子 DOM 以确保应用全局样式 (MDUI CSS)。 使用 componentDidLoad() 生命周期挂钩内的 mdui.init() 手动初始化 MDUI。 确认 MDUI CSS 和 JS 已正确加载到 HTML 文件中。 检查 MDUI 类名称（mdui-btn、mdui-btn-filled 等）是否在 Stencil 组件中正确应用。
您需要从库中导入 css 文件（导入 'mdui/mdui.css'; ）到'my-component.css'中。 考虑到你的路径，它应该是这样的： @import(../../node_modules/mdui/mdui.css);