角度材质垫选择角度应用中的下划线颜色更改-Java 学习之路

我是Angular Material的新手，所以我可能会遗漏一些东西，但我会很感激这个案子的任何帮助 . 我的目标是在焦点上将mat-select标签的默认蓝色下划线更改为白色 . 我设法通过将此代码添加到我的项目的全局样式文件来处理此问题：

.mat-select-value, .mat-select-arrow{
    color: #fff !important;
}

.mat-form-field-infix{
    border-bottom: 2px solid lightgrey !important;
}

.mat-focused .mat-form-field-underline .mat-form-field-ripple{
     background: none; 
}

您可以看到它的外观here（左上角的语言选择下拉列表） .

之后我意识到，我需要在另一个组件中使用更多mat-select标签，但这次下划线不应该是白色，而是黑色 . 这就是为什么我需要通过改变组件样式来解决我的问题，但仍然没有什么对我有用 . 到目前为止，我尝试使用！important来重置Angular Material属性，ng-deep和切换封装模式为“None” .

我也检查过这个类似的问题，但它看起来有点过时，我的返工后仍然没有对我有用 .

这是我正在使用的html模板

<div id="languageDropDown">
    <mat-form-field id="languageSelector">
      <mat-select [(ngModel)]="language" name="languageSelector" id="languageSelector" (selectionChange)="languageChanged()">
        <mat-option value="en" selected="selected" >EN</mat-option>
        <mat-option value="ua">UA</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

我正在使用：@ angular / material @ 6.3.1，Angular：6.0.6

1 回答

-1

而不是修改原始mat- *类，为什么不添加自己的类并在HTML级别调用正确的类？

所以：

<mat-form-field class="blackunderline" id="languageSelector"> .. </mat-form-field>

要么：

<mat-form-field class="whiteunderline" id="languageSelector"> .. </mat-form-field>

在你的组件的CSS（或者你喜欢的全局CSS）中：

.blackunderline {
     ...
 }

.whiteunderline {
     ...
 }

回复于 2024-04-28T04:38:39+08:00

角度材质垫选择角度应用中的下划线颜色更改

1 回答

相关问题