Фронтенд-каркас переопределяет весь CSS

Question

Я использую Material Light Design, но хочу включить некоторые компоненты / css-классы materializecss.

Когда я включаю его через 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-увеличить , не испортив весь сайт ИЛИ не перезаписывая каждый класс CSS, который я не хочу использовать?

Answer 1

Возможно, произошла ошибка в порядке следования файлов, которые вы включили вверху.Попробуйте изменить порядок CSS-файла, поместив сначала CSS-файл Material Light Design.

Если это не так, то две библиотеки могут иметь одинаковое имя класса, поэтому я предлагаю вам использовать SASS, чтобы использовать конкретные компоненты, которые вам нужны из materializecss,подробнее об этом здесь, в разделе настройки SASS: https://materializecss.com/getting-started.html

Answer 2

Я не думаю, что то, что вы спрашиваете, возможно.Файл CSS - это все или ничего, но следует отметить, что он будет использовать самое конкретное / последнее заданное правило.Имея это в виду, вы можете:

a) написать CSS, который устраняет биты, которые портят ваш сайт

или

b) написать CSS, который заменяет нужные вам биты из файла materializecss

В зависимости от того, какая работа меньше.Обязательно импортируйте свой собственный CSS после этого другого файла.