前端框架覆盖整个css。

Question

我使用的材料光设计，但希望包括一些组件/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和--只有使用一些组件，比如图像放大，从而破坏了整个网站，或者必须覆盖我不想使用的每个css类？

Answer 1

您在顶部包含的文件的顺序可能有错误。尝试重新排序CSS文件，将材料光设计的CSS文件放在第一位。

如果不是这样的话，那么这两个库可能有相同的类名，所以我建议您使用SASS来使用您需要从materializecss获得的特定组件。这里有更多关于这一点的信息，在SASS设置部分：https://materializecss.com/getting-started.html

Answer 2

我觉得你的要求是不可能的。CSS文件不是全部就是什么都不是，但要注意的一点是，它将使用给定的最具体/最近的规则。记住这一点，您可以：

( a)编写CSS，取消正在破坏站点的部分。

或

materializecss (b)编写CSS，以取代您希望从文件中获得的位。

以较少的工作量为准。确保在另一个文件之后导入您自己的CSS。