纯JS桌面Web应用启用Material Design 3预编译主题遇阻求助

1. 确认Material Components Web（MDW）版本支持MD3 #

Material Components Web从v14.0.0版本开始全面支持Material Design 3，unpkg.com/material-components-web@latest目前指向的是支持MD3的版本，但为了避免版本更新带来的兼容性问题，建议锁定具体版本（比如@14.0.0）。

你可以在浏览器控制台执行mdc.version来查看当前加载的MDW版本，确认是否≥14.0.0。

2. 修复资源引入的错误与顺序 #

你的代码存在两个关键问题：

• 错误地用<link>标签引入JS文件：<link type="text/javascript" src="/xxxxx/assets/app.js">应该改为<script>标签
• 自定义主题CSS的引入顺序错误：主题CSS必须放在MDW核心CSS之后，才能覆盖默认样式

正确的资源引入顺序： #

<!-- Material Icons 字体 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- MDW 核心CSS -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@14.0.0/dist/material-components-web.css">
<!-- 自定义MD3主题CSS（必须在MDW核心CSS之后） -->
<link rel="stylesheet" href="/xxxx/assets/css/theme.css">

<!-- MDW 核心JS -->
<script src="https://unpkg.com/material-components-web@14.0.0/dist/material-components-web.js"></script>
<!-- 你的自定义JS -->
<script src="/xxxxx/assets/app.js"></script>

<!-- 初始化MDW组件 -->
<script>mdc.autoInit()</script>

3. 验证主题CSS的MD3兼容性 #

从MD3主题构建器导出的CSS文件应该包含MD3系统颜色变量（比如--md-sys-color-primary、--md-sys-color-on-primary）以及针对MD3组件的样式覆盖。打开你的theme.css，确认是否存在这些内容：

• 全局CSS变量定义
• 针对.mdc-*类的MD3样式重写

从v14开始，MDW默认使用MD3样式，只要主题变量正确，组件会自动应用主题样式。

4. 额外检查点 #

• 确保theme.css路径正确，浏览器控制台没有404错误
• 避免在自定义样式中使用比MDW主题样式优先级更高的选择器（比如内联样式、ID选择器），否则会覆盖主题样式

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