html - 前端框架覆盖整个CSS

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

当我通过CDN将它包含在index.html的开头时，如下所示：

 <!-- 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类？

最佳答案

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

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

关于html - 前端框架覆盖整个CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53813800/