材料设计风格在一个模块上工作，但不适用于另一个模块

Question

我有一个奇怪的，不幸的是我没有代码可以分享，因为我不确定它会为这篇文章增加价值。

我有两个组件(User和Project)。 他们都导入Shared，它正在完成我所有的材料设计导入并重新导出它们。 在我的一个模块上，当我将类mat-raised-button应用于元素时，它运行良好，另一方面，它只是拉入一些 CSS 并将其注入页面上的<style>标签中，但它缺少一堆其他样式正在注入到工作模块的工作组件中。 这与我的样式范围无关，因为我可以在两个模块中启动一个全新的组件，并且在一个模块上效果很好，在另一个模块上完全不工作(除了添加带有该类的按钮之外，没有做任何其他事情)。

奇怪的是，它正在引入一些mat-raised-button风格，只是不是全部。 是否有某种机制可以防止注入某些样式？ 我很高兴发布任何可能有帮助的代码，我很抱歉这是一个如此广泛的问题，但不幸的是，我在这里没有太多要说的......

更新：我做了更多的挖掘，发现这是mat-button类不起作用。 我尝试将MatButtonModule直接导入到失败的模块中，并看到了相同的行为......仍然无法正常工作。

更新2：按钮在我的根应用程序组件中也不起作用。 他们只在我的一个模块上工作。 这真的很奇怪。 下面是工作模块的代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../Shared/Module/shared.module';
import { UserRegistrationComponent } from '../Components/user-registration.component';
import { CreateAccountDialogComponent } from '../Components/create-account-dialog.component';
import { FormsModule } from '@angular/forms';
import { ValidationErrorsComponent } from '../../user/Components/sharedcomponents/validation-errors.component';
import { UserLoginComponent } from '../Components/user-login.component';

@NgModule({
declarations: [
UserRegistrationComponent,
CreateAccountDialogComponent,
ValidationErrorsComponent,
UserLoginComponent
],
imports: [
CommonModule,
SharedModule,
FormsModule
],
entryComponents: [
CreateAccountDialogComponent
]
})
export class UserModule { }

这是无法正常工作的模块的代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../Shared/Module/shared.module';
import { ProjectFileUploadComponent } from '../Components/project-file-upload.component';
import { ProjectComponent } from '../Components/project.component';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material';

@NgModule({
declarations: [
ProjectFileUploadComponent,
ProjectComponent
],
imports: [
CommonModule,
SharedModule,
FormsModule,
MatButtonModule
]
})
export class ProjectModule { }

Answer 1

从你所描述的，我认为你用本地风格抵消了全局风格。确定这一点的方法是注释掉本地组件中的样式，并查看材质设计样式是否恢复。

如果是这种情况，您需要做的就是将 ViewEncapsulation.None 语句添加到@Component语句中，以阻止它取消外部样式：

@Component({
selector: 'speed-dial-fab',
templateUrl: './speed-dial-fab.component.html',
styleUrls: ['./speed-dial-fab.component.css'],
animations: speedDialFabAnimations,
encapsulation: ViewEncapsulation.None
})

所以不是一个有缺陷的模块。也不是巫毒教！