单个样式表中的@ angular / material样式

时间:2018-11-12 23:34:00

标签: angular angular-material

我想将所有样式移动到一个样式表中,而不要使用单个组件样式。我可以控制样式,但是当我包含@ angular / material组件时,它们将作为单独的样式标签添加:

Renders

我有一个styles.scss文件,该文件已经包含根据docu的材料设计。

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);

如何将所有组件添加到单个样式表中?

编辑:这是添加@angular/material模块的方式:

import { NgModule } from '@angular/core';
import {
  MatButtonModule,
  MatGridListModule,
  MatIconModule,
  MatListModule,
  MatSidenavModule,
  MatToolbarModule,
} from '@angular/material';

@NgModule({
  exports: [
    MatButtonModule,
    MatGridListModule,
    MatIconModule,
    MatListModule,
    MatSidenavModule,
    MatToolbarModule,
  ]
})
export class MaterialModule { }

1 个答案:

答案 0 :(得分:0)

angular-material-theme()混合的调用将仅包括组件主题以及核心(全局)样式。不属于主题的Angular Material组件样式被封装并内置到组件中,并动态添加到DOM中。无法自动将这些样式包含在单个样式表中。即使您可以这样做,也可能一切都无法正常运行,此外,您还需要关闭组件插入DOM的样式标签,这是不可能的。此外,由于组件本身已经包含样式代码,因此您将在全局样式表中复制样式,从而在页面上增加很多大小。换句话说,您不能做到,也不应该做到。