Bootstrap 和 Angular 材质冲突

Question

我几乎完成了 Angular 项目的构建，我需要进行确认对话，所以我为此使用了 Angular 材料。 现在的问题是它弄乱了我在整个项目中的引导样式，我只需要来自 Angular Material 的确认对话，而且我在没有引导的情况下重新构建整个项目样式并不实用。 这种情况我该怎么办？

Answer 1

@Component({
  selector: 'your-component',
  encapsulation: ViewEncapsulation.Emulated
  styleUrls: ['./your.component.scss']
})

在your.component.scss内部，第一行：

@import '~path/to/angular-material.css';

现在angular-material.css将适用于您的组件，并且不适用于您项目中的任何其他组件，甚至不适用于当前组件的子组件。

注意： encapsulation: ViewEncapsulation.Emulated是默认值，因此您实际上并不需要它，但将其设置为任何其他值将阻止作用域工作。

在此处阅读有关封装的更多信息。