Question

根据Angular Material Documentation，必须包含 entire theme 才能使框架正常工作。显然，整个主题包含所有组件的样式。

但是，我正在构建组件库并仅从Angular Material中提取特定组件。基于此，我需要一种只包含单个组件样式的功能。

是否可以包含特定组件的样式？

我知道可能有一个解决方案可以从源头上获取样式，但是最好使用更多的“有机”方法来封装实现，并在更新Angular Material时反映我组件中的更改。 / p>

Answer 1

尝试这样做

在您编写的theme.scss中

// Define the theme.
$component1-primary: mat-palette($mat-indigo);
$component1-accent:  mat-palette($mat-pink, A200, A100, A400);
$component1-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the theme styles for only specified components.
.component1-light-theme{
   @include angular-material-theme($component1-theme);
}

将整个父元素添加到您的组件，并将component1-light-theme添加到该元素，例如

在component1 html中

<div class="component1-light-theme">
  //all other elements
</div>

是否可以在Angular Material中为每个组件提取单独的CSS？

1 个答案: