Frontend-framework переопределяет весь css
Я использую 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 и Только, используя некоторые компоненты, такие как увеличение изображения, без нарушения всего веб-сайта ИЛИ необходимости переопределить каждый отдельный класс css, который я не хочу использовать?
Ответы 2
Я не думаю, что то, о чем вы спрашиваете, возможно. CSS-файл - это все или ничего, но следует отметить, что он будет использовать наиболее конкретное / самое последнее указанное правило. Помня об этом, вы можете:
а) написать CSS, который отменяет биты, которые портят ваш сайт
или
б) записывает CSS, который заменяет биты, которые вы хотите из файла материализовать
Что меньше работы. Обязательно импортируйте свой собственный CSS после в этот другой файл.
Возможно, произошла ошибка в порядке файлов, которые вы включили вверху. Попробуйте переупорядочить файл CSS, поместив первым файл CSS для Material Light Design.
Если это не так, то две библиотеки могут иметь одно и то же имя класса, поэтому я предлагаю вам использовать SASS для использования конкретных компонентов, которые вам нужны из materializecss. подробнее об этом здесь, в разделе настройки SASS: https://materializecss.com/getting-started.html