Angular mat-select 文本颜色无法更改。

Question

我在我的Angular应用程序中使用mat-select。我想改变文本颜色，但是颜色没有改变。

<mat-select style="color: red" [(ngModel)]="someValue">
  <mat-option>class="empty-select"</mat-option>
  <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

我可以轻易地改变背景颜色，但文本颜色却没有变化。

- Nancy

Answer 1

您需要在 mat-option 上应用样式，而不是在 mat-select 上，如下所示：

Translated:

你需要在mat-option上应用样式，而不是在mat-select上，具体方式如下：

<mat-select [(ngModel)]="someValue">
  <mat-option class="empty-select"></mat-option>
  <mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

同时你也可以在类 not-empty-select 中设置颜色。

更新1：

如果你想改变选定选项的颜色，请添加以下CSS：

.not-empty-select.mat-selected {
  color: green !important;
}

更新2：

如果你想在选择框中修改颜色，请修改CSS如下：

.not-empty-select.mat-selected {
  color: green !important;
}

:host /deep/ .mat-select-value-text {
  color: green !important;
}

- Anshuman Jaiswal

---

这个代码可以作用于选项，但是不能作用于所选的值。我想让所选的值显示为红色。 - Nancy

嗨，Anshuman。当您打开选择时，它可以工作，但是当您不打开选择时，它就无法工作。我想在屏幕加载时看到绿色，并且我还没有点击选择。您知道如何做吗？ - Nancy

嗨@AnshumanJaiswal，有没有办法在自定义类中应用:host /deep/，以便不影响页面上的所有选择文本？ - Rebecca Douglas

在点击触发器之前，使用<mat-select-trigger class="mynewcolor">{{ selectedvalue }}</mat-select-trigger>来更改视图。 - Janos Vinceller

Answer 2

如果您仔细检查，mat-select-value是保存mat-select标签中占位符字体CSS的类；

因此，使用：

::ng-deep .mat-select-value{    
      color: white!important;  }

将应用您提供的颜色。!important是为了覆盖默认值。

- Ganapathy

---

在样式表的开头添加:host将使其仅限于组件范围内，而不会泄漏到全局样式中。 - Imran Faruqi

Answer 3

您可以通过以下方式覆盖以下元素的CSS -

选择框面板

/deep/ .mat-select-panel {
    background-color: red;
}

选择框选项元素

/deep/ .mat-form-field-infix{
     background-color: red;
}

选择框

/deep/ .mat-select{
   background-color: red;
}

不要忘记按照提到的方法添加 /deep/。

选择框文本颜色

如果你想改变选择框的文本颜色，请使用这个。

/deep/ .mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
  color: red;
}

这里有演示复制 - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy

- Sunil Singh

---

嗨Sunil，谢谢你的回复。第三个选项正是我在寻找的，但不幸的是这对文本颜色不起作用。如果我这样做什么也不会改变： /deep/ .mat-select{ color: red; } - Nancy

为 Select Box 文本颜色添加了 CSS 覆盖。 - Sunil Singh

Answer 4

::ng-deep .mat-select-arrow {
  display: none !important;
}

它对我有效

- hamed.nosrati

---

仅提供代码答案是不鼓励的。请提供您的答案如何解决问题以及为什么它可能比已经提供的其他答案更可取的摘要。 - DaveL17

Answer 5

将此添加到您的styles.css文件中。

.mat-select-red .mat-select-value{
   color: red !important;
}

在你的组件.html文件中。

<mat-select class="mat-select-red" [(ngModel)]="someValue">
  <mat-option>class="empty-select"</mat-option>
  <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

- Dushyanth Kandiah

---

这将改变整个应用程序的样式。 - Imran Faruqi

你需要在特定的component.css文件中使用::ng-deep来定义类。 - Dushyanth Kandiah

Answer 6

  <mat-select  [(ngModel)]="someValue">
      <mat-option style="color: red" >class="empty-select"</mat-option>
      <mat-option style="color: red" class="not-empty-select" 
         *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
    </mat-select>

- harkesh kumar

Answer 7

option appearance (legacy, standard, fill, outline)

<mat-form-field appearance="legacy">
   <mat-label>Choose an option</mat-label>
   <mat-select>
      <mat-option value="option1">Option 1</mat-option>...
   </mat-select>
</mat-form-field>

- krisyupher

---

你可能需要在你的回答中添加更多的上下文。 - Beto Frega

Answer 8

假设你有这个选择器：

<mat-form-field appearance="fill">
    <mat-label>The label</mat-label>
    <mat-select>
        <mat-option value="This">This</mat-option>
        <mat-option value="That">That</mat-option>
    </mat-select>
</mat-form-field>

这样显示：

如果只想设置颜色样式，请尝试以下方法：

::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: red;
}

::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
    color: red;
}

::ng-deep .mat-form-field.mat-focused.mat-primary .mat-select-arrow{
    color: red;
}

::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled){
    color: red;
}

这将产生

这适用于 Angular 11.2.0 和 Angular Material 11.2.0。

- Odys

Answer 9

这段代码帮助我改变了所选文本的样式： ::ng-deep .mat-selected .mat-option-text { color: white!important; }

- Artur Haiduk

Answer 10

如果你需要从一个变量中设置mat-option的颜色，你应该：

1. 在 mat-select 中设置 panelClass：

   <mat-select panelClass="inherit-color">

2. 设置 CSS 规则：

   .inherit-color .mat-option { color: inherit!important; }

3. 将 mat-option 包裹在 span 中，并在其中设置样式：

       <span style="color: {{somevar}}">
         <mat-option [value]="someval">{{someval}}</mat-option> 
       </span>
   

- Lidiya Parshina