Bootstrap 和 Angular 材质冲突答案

【问题标题】：Bootstrap and Angular Material conflictBootstrap 和 Angular 材质冲突
【发布时间】：2020-07-24 14:59:11
【问题描述】：

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

【问题讨论】：

Bootstrap 有一个模态窗口，您可以使用它来达到相同的效果，这意味着您可以完全取消 Material。您需要 Material 对话有什么原因吗？
是否导入整个 MaterialModule？
我只需要一个确认对话框来确认删除记录和重置余额。我觉得这很好，因为我可以订阅它的输出，无论是单击“是”按钮还是“否”按钮。就是这样
Michal Lis 我只在 app.module 中导入了 MatDialogModule ,MatButtonModule ,BrowserAnimationsModule ，我在styles.css中导入了css样式文件

【解决方案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 是默认值，因此您实际上并不需要它，但将其设置为任何其他值都会阻止作用域工作。

阅读更多关于封装的信息here。

【讨论】：

现在引导样式没问题，但是确认对话框的样式很乱
您希望我知道 "messed" 对您意味着什么吗？如果您有子组件并希望angular-material.css 应用于它们，您可以将导入包装到::ng-deep { @import here... }。但我不确定这是否是有效的语法。我的意思是，我知道它不在 CSS 中，但解析器可能会理解并正确解析它。
@Omar，创建一个引导层或代码框，我会看看。没有看到你所拥有的，就无法提供更多帮助。使其最小化，用于测试：一个引导样式的组件，以确保它不会受到影响和对话。
不，我没有任何子组件，它只是对话组件。我的意思是当我使用这种方法时，对话样式不合适，它移到了左下角，我不明白为什么
@Omar，您是将封装应用到模态打开的组件还是打开模态的组件？您应该将其应用于模态显示的那个。不太确定，但您可能必须在两者中封装样式。同样，如果没有看到示例，我真的无法提供更多帮助。