角材料垫选择样式问题

Posted 2023-03-13

【中文标题】角材料垫选择样式问题

【英文标题】：Angular material mat-select styling issues

【发布时间】：2020-07-05 09:13:21

【问题描述】：

我正在使用 angular 8.0.0、angular material 和 Fuse Theme as admin panel。 问题是，每当我更改 mat-select 的样式时，它就会被应用，但经过一两次刷新后，角度材质会覆盖本地组件更改并应用默认值。 它也适用于所有组件我怎样才能改变只有一个 mat-select 的样式？

我的 html 的一部分是问题所在：

   <form>
    <mat-form-field>
        <mat-label class="label-colors"> bla bla </mat-label>
        <mat-select formControlName="">
            <mat-option value="active" class="empty-select">bla bla</mat-option>
            <mat-option value="inactive" >bla bla</mat-option>
        </mat-select>
       </mat-form-field>
       <mat-form-field>
        <mat-label class="label-colors"></mat-label>
        <mat-select formControlName="isReserved">
            <mat-option value="active"></mat-option>
            <mat-option value="inactive"></mat-option>
        </mat-select>
       </mat-form-field>
      </form>

scss 文件：

.mat-select-arrow
    color: rgba(255, 255, 255, 0.54)!important;
  
  .label-colors 
    color: #ffffff !important;
    font-size: 16px;
  
  
  // mat-input caret color
  .input-element-color 
    caret-color: #ffffff !important;
  
  .blue
    background-color: blue; 

.mat-form-field-underline
  background-color: rgb(61, 82, 89)!important;

.date-icons
    color: #ffffff !important;
    width: 100%;
    height: 100%;
   
   th
    font-weight: bold !important ;
    color:black !important;
    font-size: 14px !important;
  
  // .mat-select-value-text
  //   color: #fff!important;
  // 

  .mat-form-field
    //width: 155px; 
    margin: 3px;
  
  // body.theme-default .mat-select-value
  //   color: rgba(255, 255, 255, 0.87);
  // 
  .editdeleteicon
    color: #003042;
  
  .fix-text
    white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 88px; 
   padding: 0 10px !important;
  
  .fix-text :hover
    overflow: visible;

尝试了有关 *** 的所有建议，但似乎无法更改 mat-select 的颜色并保持这种状态，即使我可以，但当我更改时，它确实会在其他任何地方发生变化。我希望我清楚

更新：通过添加类 mat-form-field 然后在 scss 中修复

 .example-class
    // inside this class added:
    .mat-select-value-text 
        color: red;
    
    

【参考方案1】：

您使用了 !important，这有时有助于覆盖 css，但在这种情况下，您还有更多工作要做，因为它是 angular material 模块的一部分。 所以，你有两个选择：

1- 在课程前添加 ::ng-deep。例如

::ng-deep .className color: blue !important

2- 或者您应该在 style.css（或 style.scss，具体取决于您使用的是 css 还是 scc）中编写与您在那里编写的相同的内容，但这意味着这些更改将适用于任何地方的组件在您的应用程序中，例如，如果您在应用程序的另一部分使用 mat-select，则此处的更改将影响它，因为 style.css/style.scss 的范围在所有应用程序上。

所以你可以选择你需要的方法。

希望对你有帮助！

【讨论】：

您好，谢谢您的回答，虽然 ng-deep 已被弃用，但它在 angular.io 中也有说明，但我会尝试。