如何无需浏览器查看Angular Material库的CSS类并获取其源码？

完全可以下载Angular Material的源码来查看内部CSS实现，甚至还有更便捷的调试方式：

• 直接查看本地已安装的源码
  当你通过 npm install @angular/material 安装依赖后，Angular Material的完整源码（包括每个组件的SCSS/CSS文件）会存放在项目的 node_modules/@angular/material 目录下。每个组件的样式文件都在对应组件的子文件夹里，比如按钮组件的样式就在 node_modules/@angular/material/button 目录中，能直接打开查看原生的类定义和属性值。

• 无需下载源码的快捷调试方式
  用浏览器开发者工具（按F12唤起）选中目标Angular Material元素，在「Styles」面板里就能看到该元素所有生效的CSS规则，包括Angular Material内置类的具体属性。你可以在这里实时修改样式测试效果，确认可行后再把自定义样式写到自己的组件文件中。

• 注意事项
  不要直接修改node_modules里的源码样式——重新安装依赖时这些修改会被覆盖。正确的做法是通过提升选择器权重（比如给自定义组件加额外类名，组合选择器）来覆盖原有样式，或者使用Angular的ViewEncapsulation.None取消组件样式封装（需注意全局样式污染），尽量避免用!important强制覆盖。

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