html - 前端框架覆盖整个 css

Question

我正在使用 Material Light Design，但想包含 一些 materializecss 组件/css 类。

当我像这样在 index.html 的开头通过 CDN 包含它时:

 <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

它覆盖并改变了网站的整体风格，因此它看起来非常错误。例如标题栏被完全覆盖:

如何包含 materializecss 并且只使用一些组件，比如 image-enlargement ，而不会弄乱整个网站，或者不必覆盖我不想使用的每个 css 类？

Answer 1

您在顶部包含的文件的顺序可能有误。尝试通过将 Material Light Design 的 CSS 文件放在首位来重新排序 CSS 文件。

如果不是这种情况，那么这两个库可能具有相同的类名，所以我建议您使用 SASS 来使用您需要的特定组件，这些组件来自 materializecss。更多信息，在 SASS 设置部分:https://materializecss.com/getting-started.html