Search code examples
htmlcssframeworkscomponentsmaterialize

Frontend-framework overrides whole css

I am using Material Light Design but want to include some components/css-classes of materializecss.

When I includ it via CDN at the beginning of the index.html like this:

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

it overrides and changes the whole style of the website, so that it looks very buggy/wrong. For example the header bar is completly overriden:

enter image description here

How can I include materializecss and only use some components, like image-enlargement, withouth messing up the whole website OR having to override every single css class I don't want to use?

Solution

  • There might have been a mistake in the order of the files you have included at the top. Try reordering the CSS file by putting material light design's CSS file first.

    If thats not the case then the two libraries may have the same class name so i suggest you use SASS to use the specific components u need from materializecss. more on this here, under the SASS setup section : https://materializecss.com/getting-started.html