Question

我需要为Angular Material 2生成自定义主题。但是Angula 2团队提供的教程包括scss文件的代码：

@import '../../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core(); $primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-light-blue, 600, A100, A400);
$warn: mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

生成带有前缀 .mat - 的CSS类，我相信元素的材料v1表示法？

所以我决定使用mat-card和其他组件，但是当我这样做时，angular 2给了我这个错误

“mat-”前缀不能用于ng-material v1兼容模式。

任何帮助如何 A）打开兼容模式 B）以另一种方式生成主题？

Answer 1

<强>更新

自2.0.0-beta.11起，md-前缀已完全弃用，mat-前缀应继续使用。

如果您使用的版本低于2.0.0-beta.11，那么如果您的项目使用的是 AngularJS材料，则仅会出现问题 - 与 Angular Material 2 并排。

如果您没有在项目中使用 AngularJS Material ，只需使用md-前缀，就不会出现兼容性问题（又称CSS冲突）。

<强>解决方案：

如果您的项目使用 AngularJS材质 AND Angular 2材质，则需要避免CSS碰撞：

将NoConflictStyleCompatibilityMode导入应用程序的根模块。

import { NoConflictStyleCompatibilityMode } from '@angular/material'

@NgModule({
    ...,
    imports: [NoConflictStyleCompatibilityMode]
})
export class AppModule {}

然后使用 Angularjs Material 元素的md-前缀和 Angular Material 2 元素的mat-前缀。

@angular/material的兼容模式允许组件（前缀为md-）与AngularJS Material组件并排存在，而不会发生任何CSS冲突。

启用后，兼容模式会强制所有模板API使用前缀mat-而不是md-。这样可以防止 AngularJS Material 中的任何CSS影响@angular/material中的组件。

找到的文档here。

Angular 2打开兼容模式

1 个答案:

<强>更新