角材料垫选择样式问题

Question

我正在使用 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;

}

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

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

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

Answer 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 的范围在所有应用程序上。

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

希望对你有帮助！