【问题标题】: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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-06-19
    • 2019-02-05
    • 2019-07-08
    • 2019-06-19
    • 1970-01-01
    • 2020-07-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多