Winkelmaterial: Komponenten nicht richtig gestylt

Question

Ich habe ein Projekt mit Angular Material 10 eingerichtet. Die Komponenten werden nicht richtig gerendert, wie Sie in diesem StackBlitz-Beispiel sehen können .

Ich erhalte keine Fehler in der Konsole.

Ist das ein bekannter Fehler?

Answer 1

Sie können die CSS-Datei korrekt importieren.

bearbeiten

Antwort

Aber wie hier gefunden und auch hier beantwortet

Wenn sich der Inhalt Ihrer App nicht in einem mat-sidenav-container-Element befindet, müssen Sie Ihrem Wrapper-Element (z. B. dem Body) die mat-app-background- Klasse hinzufügen . Dadurch wird sichergestellt, dass der richtige Themenhintergrund auf Ihre Seite angewendet wird.

Sie müssen das bodyTag mit der mat-app=backgroundKlasse zu Ihrem index.html oder einem Wrapper-Element um die App hinzufügen , damit es funktioniert. Siehe hier für das Beispiel .

Beachten Sie, dass Sie beim Hinzufügen zum appKnoten selbst auch eine benötigendisplay: block

Nützlich

Angular bietet drei verschiedene Möglichkeiten, um Ihrer App ein Materialthema hinzuzufügen

1. Innerhalb der angular.jsonDatei

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
  "src/styles.scss"
],

1. in der style.cssDatei

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

1. In der index.htmlDatei

<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">

Answer 2

Sie müssen ein Thema in Ihr styles.cssBeispiel aufnehmen:

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Und fügen Sie einen Verweis auf styles.cssin index.htmlwie folgt hinzu:

<head>
  <link href="styles.css" rel="stylesheet">
</head>

Wenn Sie das nicht verwenden möchten styles.css, können Sie das Thema in Folgendes aufnehmen index.html:

<head>
  <link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">
</head>

Referenz: https://material.angular.io/guide/theming