0

我正在使用 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 类？

4

2 回答 2

1

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

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

于 2018-12-17T17:16:21.933 回答
0

我不认为你问的是可能的。CSS 文件是全有或全无，但需要注意的一点是，它将使用给出的最具体/最新的规则。牢记这一点，您可以：

a)编写 CSS 来消除扰乱您网站的部分

或者

b)编写 CSS 来代替您想要从materializecss文件中获取的位

哪个工作量少。请务必在此其他文件之后导入您自己的 CSS。

于 2018-12-17T17:06:42.087 回答