【问题标题】:Unable to change style in Angular Material's Select无法在 Angular Material 的 Select 中更改样式
【发布时间】:2017-06-28 22:39:36
【问题描述】:

我一直在尝试在 Angular Material 的 MdSelect 内的覆盖面板内进行一些样式更改,以更改最大宽度属性(标准为 280 像素)。

我已经尝试了所有方法,例如使用 '!important' 属性覆盖 mat-select-panel 类,或使用 panelClass 输入(我正在通过它的类出现在类属性中,但似乎没有考虑)。

有人遇到过同样的问题吗?我该如何解决这个问题?

谢谢!

【问题讨论】:

    标签: css angular typescript sass angular-material2


    【解决方案1】:

    您可以在父组件的 CSS 中使用 /deep/ 指令。 See documentation here.

    如果您要覆盖样式的组件有:

      <div class="foo">...</div>
    

    你可以把你的父母或应用 css :

    /deep/ .foo {
       [ ... ]
    }
    

    【讨论】:

    • 不幸的是,我也试过了。我用过 :host /deep/ .mat-select-panel { max-width: none !important; },但它没有工作。
    • 尝试一些肮脏但可见的东西,例如 :host /deep/ .mat-select-panel { background-color: red!important },只是为了确定?您可能需要在此处根据您的用例覆盖更多 CSS(例如,宽度也可能受“显示”或“位置”影响)
    • 也没什么...我一直在 Material 的 github 中搜索,我发现 mat-select-panel 中的 max-width 属性来自一个名为 mat- 的 sass mixin menu-base(),包含在 mat-select-panel 中。
    【解决方案2】:

    你可以尝试在 main css 中设置它。

    .cdk-overlay-pane {
      .mat-select-panel {
        max-width: 700px;
      }
    

    }

    【讨论】:

      猜你喜欢
      • 2019-01-07
      • 1970-01-01
      • 2017-10-04
      • 2022-08-20
      • 2018-10-17
      • 2018-12-20
      • 1970-01-01
      • 2018-05-21
      • 2018-08-17
      相关资源
      最近更新 更多