Angular Material表格背景呈黑色的样式问题排查与调整咨询

Hey there! Let's break down how to figure out why your table has a black background with white text, and how to fix it step by step.

First: How to Inspect the Active CSS Rules #

To pinpoint exactly which styles are affecting your table (and where they’re coming from), use your browser’s developer tools—it’s the go-to tool for debugging styling issues:

• Open DevTools by pressing F12, or right-click your table and select "Inspect"
• In the Elements tab, click on any part of your table (like a mat-row or the mat-table element itself)
• Switch to the Styles panel on the right: here you’ll see all CSS rules applied to the selected element, including:
  • Rules from Angular Material’s purple-green.css theme
  • Global styles from your styles.css
  • Any component-specific styles (even if you haven’t added any yet)
• Look for background-color and color properties—you’ll immediately see which rule is setting the dark background/light text, and its source (e.g., a class from the purple-green theme)

Why Your Table Looks Dark #

The purple-green.css prebuilt theme is a dark theme—Angular Material’s dark themes are designed with dark backgrounds and light text by default. The examples you referenced are likely using a light theme (like indigo-pink.css or deeppurple-amber.css), which uses white backgrounds and black text.

How to Fix the Styling #

You have a few options depending on whether you want to switch themes entirely or just override the table’s styles:

Option 1: Switch to a Light Prebuilt Theme #

The simplest fix is to replace the dark theme with a light one in your global styles.css:

/* Replace this dark theme import */
@import "~@angular/material/prebuilt-themes/purple-green.css";

/* With one of these light themes */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
/* OR */
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Option 2: Create a Custom Light Theme (Keep Purple/Green Colors) #

If you like the purple-green color scheme but want a light background, define a custom light theme in styles.css:

@import '~@angular/material/theming';
@include mat-core();

/* Keep your preferred purple/green palette */
$app-primary: mat-palette($mat-purple);
$app-accent: mat-palette($mat-green);
$app-warn: mat-palette($mat-red);

/* Build a LIGHT theme (instead of dark) */
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

/* Apply the theme to all Angular Material components */
@include angular-material-theme($app-theme);

/* Keep your other global imports */
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

Option 3: Override the Table's Styles Locally #

If you want to keep the dark theme for other components but make this table light, add these styles to your list.component.css (use ::ng-deep to bypass Angular’s view encapsulation):

::ng-deep .lessons-table {
  background-color: #ffffff;
}

::ng-deep .lessons-table mat-header-row,
::ng-deep .lessons-table mat-row {
  background-color: #ffffff;
}

::ng-deep .lessons-table mat-header-cell,
::ng-deep .lessons-table mat-cell {
  color: #000000;
}

内容的提问来源于stack exchange，提问作者nani21984