【问题标题】:Angular overriding angular material, for 3 different components. Having similar material角度覆盖角度材料,用于 3 个不同的组件。有类似的材料
【发布时间】:2021-11-17 14:44:14
【问题描述】:

我有 3 个组件,其中有这些角材料

  1. mat-card 内的 mat-forms
  2. 垫卡内的垫子扩展面板
  3. 分页卡,卡内。 因此,当我尝试使用 View Encapsulation 覆盖 CSS 样式时,就像这样
      encapsulation: ViewEncapsulation.None,
      host:{"class": "app-forms"}// component name here 

我覆盖了表单组件的 CSS 样式。 IT 工作正常,直到我导航到不同的组件,当我回来时,表单组件样式被破坏。甚至其他组件样式都被破坏了。 (表单组件采用其他组件卡片样式的样式)

我尝试使用 /deep/,因为它已被弃用,对我不起作用 我明白为什么会发生这种情况我无法找到任何解决方案来解决这个问题。

【问题讨论】:

    标签: angular angular-material


    【解决方案1】:

    尝试将您自己的类添加到材质组件中,并通过您自己的类覆盖材质类

    例如

    <mat-form-field class="custom-form-field"></mat-form-field>
    

    styles.css 文件中

    .custom-form-field {
      // your styles
    }
    
    .custom-form-field .mat-input-element {
      // your styles for the inner material(html) elements
    }
    

    【讨论】:

    • 但是在 mat-form-field 里面有更多类似 mat-label、mat-input 的东西。我该如何定制这些?即使是那些,我也必须上课吗?因为我不能这样做。在表单内有输入字段、标签、下拉菜单,我什至想更改这些。
    • @HemanthGirimath 当您将自己的类添加到材料元素时,就像上面的示例一样。之后,您可以根据自己的类自定义所有内部元素。它将帮助您不破坏现有的材料样式,并通过自定义类应用您的。
    • 另外,您不需要将自定义类添加到内部元素,更多关于 CSS 选择器的信息可以在这里找到w3schools.com/cssref/css_selectors.asp
    • 谢谢,它成功了。真的很感激。但是使用 SCSS 会很容易做到这一点吗?还是同一个过程。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-03-23
    • 2023-03-09
    • 2018-07-18
    • 2018-04-26
    • 2021-01-02
    • 2014-12-26
    • 1970-01-01
    相关资源
    最近更新 更多