如何降低Angular Material卡片的3D效果？无法替换为Div

Got it, let's get this sorted! The 3D (shadow/elevation) effect you're seeing on Angular Material cards comes directly from the card's built-in styles, not the z-index of your .mat-drawer-container—that's why adjusting the drawer's z-index didn't help (z-index controls stacking order, not the card's visual appearance). Since you can't replace the mat-card component, we can override its styles to match that simple bordered div look you want.

Here are the cleanest ways to do this:

1. Use Angular Material's Built-in Elevation Class + Custom Border #

Angular Material provides a pre-made class mat-elevation-z0 that removes all elevation (shadow) from components. Pair this with a custom border to get your desired style:

Template:

<mat-card class="mat-elevation-z0 plain-border-card">
  <!-- Your card content here -->
</mat-card>

Component CSS (or global styles.css):

.plain-border-card {
  border: 1px solid #e0e0e0; /* Adjust the border color to match your needs */
  /* Optional: Tweak padding if you want to match a plain div's spacing */
  padding: 1rem; /* Mat-card has default padding, adjust as needed */
}

2. Override Default Mat-Card Styles Globally #

If you want every mat-card in your app to have this plain bordered look, add these styles to your global styles.css file (avoids needing to add classes to each card):

.mat-card {
  box-shadow: none !important; /* Remove default elevation */
  border: 1px solid #e0e0e0; /* Add your border */
}

3. Component-Specific Override (Without Global Styles) #

If you only want this change in one component, use ::ng-deep (note: it's deprecated but still widely used for component-specific style overrides, or you can disable view encapsulation for the component):

Component CSS:

::ng-deep .mat-card {
  box-shadow: none;
  border: 1px solid #e0e0e0;
}

Why Your Z-Index Attempt Didn't Work #

The z-index property controls how elements stack on top of each other, not their visual styling like shadows or borders. The 3D effect was coming from the box-shadow applied to the mat-card itself, so adjusting the drawer container's z-index had no impact on that.

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