materialize css 不适合新项目：已停止维护、依赖 jquery 且加载顺序敏感、不支持 es module、cdn 不稳定、初始化需手动控制、与原生日历冲突、css 硬编码且无 typescript 支持。
Materialize CSS 不是现代前端开发的合理选择，尤其对新项目——它已停止维护、兼容性差、与主流生态脱节。
为什么 materialize.css 在 2024 年仍会报 Uncaught ReferenceError: $ is not defined
这是最常卡住人的第一步：Materialize 依赖 jQuery，但没显式声明或加载顺序错。
它不是独立 CSS 框架，所有组件（如 dropdown、modal）都靠 jQuery 初始化。
- 必须在
materialize.js前引入jquery.min.js（且版本不能高于 3.6.x，否则$.fn.velocity报错） - 不能用 ES Module 方式 import：
import M from 'materialize-css'会失败，它没有默认导出 - CDN 引入时，
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js这类旧链接已不可靠，部分文件返回 404
用 M.AutoInit() 还是手动初始化 M.Modal.init()？
自动初始化看似省事，实际掩盖 DOM 加载时机问题，导致组件不响应或重复绑定。
-
M.AutoInit()只在调用时扫描当前 DOM，后续动态插入的节点不会被识别 - 推荐手动初始化，明确控制生命周期：
document.addEventListener('DOMContentLoaded', () => { const elems = document.querySelectorAll('.modal'); M.Modal.init(elems, { dismissible: false }); }); - 注意：
M是全局变量，不能重命名；若用 Webpack，需通过expose-loader或window.M = M暴露
input[type="date"] 和 datepicker 冲突怎么办？
Materialize 的 datepicker 会覆盖原生 input[type="date"] 行为，但原生组件在 iOS/Safari 上体验更好，且支持无障碍标准。
立即学习“前端免费学习笔记（深入）”；
- 禁用自动增强：在初始化前加
document.addEventListener('DOMContentLoaded', () => { M.Datepicker.init = () => {}; }); - 或改用纯 CSS 方案（如
input[type="date"]+ 自定义样式），Materialize 的.input-field类可复用 - 不要混用：同时写
<input type="date" class="datepicker">会导致两个日历弹出层叠加
真正麻烦的从来不是“怎么让 modal 弹出来”，而是当你要改一个颜色变量、加一个 dark mode 切换、或者把表单校验和 React 状态同步时，才发现它的 CSS 是硬编码的 !important，JS 没有 TypeScript 类型，文档里写的 API 在实际版本中早已失效。这些细节不报错，但每天都在拖慢你。
