有可能在Angular Material中为每个组件提取单独的CSS吗

Question

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

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

是否有方法包含特定组件的样式

我知道可能有一个解决方案可以从源代码中获取样式，但最好有一个更"有机"的方法来封装实现，并在更新Angular Material时反映我的组件中的变化。

Answer 1

试着这样做

你写了

// 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灯光主题添加到该元素中，如

在component1 html 中

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