角材料垫-选择造型问题

Question

我正在使用angular 8.0.0,angular material和Fuse主题作为管理面板。问题是，每当我更改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的颜色-选择并保持它的颜色，即使我可以，当我改变它时，它会改变其他地方。我希望我是清楚的

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

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

Answer 1

您使用了！重要，它有时对覆盖css很有帮助，但在这种情况下，您需要做一些更多的事情，因为它是angular material模块的一部分。因此，您有两种选择：

1-在类之前添加：：ng-deep。例如：

::ng-deep.classname{color：blue！重要}

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

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

希望这能对你有所帮助！