'Angular Material removes previous styling after installation

I made a Homepage for my company and i wanted to add a contact form with angular material. After i installed Angular Material all my h1 and h2 an p stylings are like removed or overwritten. When i remove the Angular Material code in the global styles.scss file the headlines and texts are back to normal but the material components are not styled.

Here are some screenshots:

This is without the material code in the styles.scss - this is how it should look This is without the material code in the styles.scss - this is how it should look

And this is how it looks with the code And this is how it looks with the code

and here is the code thats added to styles.scss:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$website-primary: mat.define-palette(mat.$indigo-palette);
$website-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$website-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$website-theme: mat.define-light-theme((
  color: (
    primary: $website-primary,
    accent: $website-accent,
    warn: $website-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($website-theme);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source