Question

请不要拒绝我我是新来的我正在使用角度8.0.0，角度材料和Fuse Theme as admin panel。问题是，每当我更改垫选样式时，都会应用它，但是在一两次刷新后，角度材质会覆盖局部分量更改并应用默认值。它还适用于所有组件，我如何才能更改单个垫选的样式？

问题所在的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很有帮助，但是在这种情况下，您还有很多事情要做，因为它是角材料模块的一部分。因此，您有2个选择：

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

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

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

因此您可以选择所需的方法。

希望这可以为您提供帮助！

角材料垫选择样式问题

1 个答案: