主题概述 mat-input box、mat-select 和 mat-paginator答案

【问题标题】：Theming outlined mat-input box, mat-select and mat-paginator主题概述 mat-input box、mat-select 和 mat-paginator
【发布时间】：2018-10-13 06:03:56
【问题描述】：

我正在尝试以上述元素为主题。但是，如果我在全局范围内应用样式，它只是不会主题化元素的每个方面。

这是我已经实施/尝试过的方法。 https://stackblitz.com/edit/angular-b8a8oa

不胜感激任何关于此的指针。我以前从未设计过复杂的角度组件。我是来学习的。 material.angular.io 上关于各种组件主题化的文档没有太多信息。因此，我在这里问。

谢谢

【问题讨论】：

设置边框还不够吗？
大纲表单域sentiment_very_satisfied

标签： angular angular-material-5 angular-material-6

【解决方案1】：

看来您也是新的css :) 您添加了inline style 并预计所有element 都会受到影响。

如果您要定位多个elements，那么您必须使用css class 来实现此目的。

由于您使用的是 Angular 材质，让我告诉您它有自己的一组 css class 需要使用以下语法覆盖

/deep/ {className}{

}

前

/deep/ .mat-dialog-container{
     background-color: cyan;
}

对于演示，您可以使用链接 - https://stackblitz.com/edit/angular-b8a8oa-udwwjz

【讨论】：

Stackblitz 链接无效
另外，我想了解如何在设计全局范围策略之前单独设置它们的样式，因此是内联样式。

【解决方案2】：

我正在调查如何使用其他组件来做到这一点。你正在尝试的那种方式，覆盖我所做的 CSS 并且它的工作原理。但这不是正确的，而且对于每个新组件，它一直是很多重复性的压倒一切的工作。正确的方法是为材料设计创建自定义主题。这是我目前关注的文档：

https://material.angular.io/guide/theming-your-components

这是我的建议，走这条路。

【讨论】：