如何加载角度材料css答案

【问题标题】：How to load angular material css如何加载角度材料css
【发布时间】：2022-01-12 18:08:02
【问题描述】：

我有基本的导航和两个组件。

Component1 使用 MatTable，而 Component2 是纯 HTML 表格，带有材质 css 类：

<table class="mat-table mat-elevation-z8">
  <tbody>
    <tr class="mat-row">
      <td class="mat-cell">

当我导航到 Component1，然后导航到 Component2 时，一切都很好。但是，当我首先导航到 Component2 时，缺少一些材质样式，例如表格线。

如何在不使用材质组件的情况下正确使用材质 css 角度

【问题讨论】：

你在哪里包含了 Angular Material 主题导入？

标签： angular angular-material angular7

【解决方案1】：

如何在不使用材质组件的情况下正确使用材质 css 角度

简短的回答是你不能这样做。如需更详尽的说明，请参阅Using Angular Material classes outside Angular pages。

重申该帖子的要点，您需要了解的主要内容是 <table mat-table> 是一个 Angular 组件，而 <table class="mat-table"> 只是一个带有类的 <table>。当您使用该组件时，您将获得仅属于该组件的所有封装样式，而不仅仅是在“mat-table”类的全局样式表中定义的样式。当然，如链接中所述，样式就是样式，css 只是 css，所以使用材料类会做一些事情，但它不会做你可能想要的一切。

【讨论】：

那么，如果我需要 Angular Material 不支持的自定义功能，我该怎么办？
我不太明白这个问题。您应该按照应该使用的方式使用 Angular Material 组件。 Angular Material 不是样式类库。为什么不能使用<table mat-table> 而不是<table class="mat-table">？

【解决方案2】：

在我看来，将材料主题导入您的应用程序的最佳方式是添加到您的（src/styles.scss，考虑到您使用的是 SCSS 预处理器）：

// material theming
@import '../node_modules/@angular/material/theming';
@include mat-core();
@import 'my-theme';

// create the default theme
@include angular-material-theme($my-theme);

然后，包含您自己的主题 (my-theme.scss)：

$my-primary: mat-palette($mat-blue_gray, 800);
$my-accent: mat-palette($mat-green, 400);
$my-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

【讨论】：

【解决方案3】：

我发现的唯一令人作呕的解决方法是在您的自定义表格之前或之后添加一个空垫表。

<table mat-table>
    <ng-container matColumnDef="workaround">
        <td mat-cell *matCellDef="let element">workaround</td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: ['workaround'];"></tr>
</table>

<table class="mat-table mat-elevation-z8">
  <tbody>
    <tr class="mat-row">
      <td class="mat-cell">
...

这样，它将包含所有必需的 CSS。

【讨论】：