如何更改材質單選按鈕的文本顏色

我需要你的幫助。我有一小段代碼。我將 Material UI 與 Angular 一起使用。我有一個帶有單選按鈕的組。事實是單選按鈕中的文本沒有改變，盡管我將scss值設定為這種顏色：#262D34。

<mat-radio-group aria-label="Select an option" style="display: flex; flex-direction: column">
   <mat-radio-button value="1" class="radio_button">
     Roman Dyshko
   </mat-radio-button>
   <mat-radio-button value="2" class="radio_button">
     Roman Dyshko
   </mat-radio-button>
</mat-radio-group>

.radio_button {
   font-family: 'Work Sans', serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 150%;
   text-decoration-line: underline;
   color: #556EE6;
}

mat-radio-group mat-radio-button .radio_button {
  color: #556EE6;
}

uj5u.com熱心網友回復：

::ng-deep如果您想完全訪問這些組件的樣式，則必須使用。像這樣：

::ng-deep mat-radio-group mat-radio-button .radio_button {
  color: #556EE6;
}

如果您想通過組件樣式設定，上面的代碼通常可以作業。

更新的答案

如果你想重新設計你的單選按鈕，它應該是這樣的：

::ng-deep
  .mat-radio-button.mat-accent.mat-radio-checked
  .mat-radio-outer-circle {
  border-color: blue; /*change radio button color when selected*/
}

::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: red; /*change radio button inner circle color */
}

::ng-deep .mat-radio-outer-circle {
  border: 1px solid black; /*change radio button not checked border */
}

::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  background-color: rgba(0, 0, 0, 0.1) !important; /* change click effect color */
}

注意：我使用!important了 ，因為如前所述，只有在少數情況下您必須使用強制更改樣式。

uj5u.com熱心網友回復：

您需要使用 覆寫默認樣式::ng-deep。這是不推薦使用的功能，它可能會改變顏色應用程式。所以像這樣謹慎使用。

::ng-deep mat-radio-group mat-radio-button .radio_button {
  color: #556EE6 !important; //<--- not necessary but needed in some cases
}

!important如果你有一個活躍的終端，你需要添加（在某些情況下）并殺死你的終端。再次重新編譯應用程式應該可以解決您的問題。

uj5u.com熱心網友回復：

材質單選樣式

文本

Angular 的 API 宣告ng-deep偽類已被棄用，并完全禁用該規則的視圖封裝。

如果我們在沒有 :host 偽類的情況下使用它，它將使樣式規則全域化，這不是一件好事。

您可以使用：

.mat-radio-button {
  color: pink;
}

或者，如果您想使用調色板中的顏色：

.mat-radio-button {
  color: mat.get-color-from-palette($primary-light, 400);
}

波紋

有些人還喜歡將波紋覆寫為次要或非彩色。所以我也會添加一個小例子：

.mat-radio-ripple .mat-ripple-element {
  background-color: mat.get-color-from-palette(
    $accent-palette,
    A400
  ) !important;
}

簡而言之，您只需要知道要覆寫的正確類名。在某些情況下，例如波紋，!important需要覆寫默認值。

僅選擇標簽

當您只想選擇組/單選按鈕來獲得樣式時的另一個示例。

模板

<li>
  <mat-radio-group
    class="pink"
    aria-label="Select an option"
    formControlName="gender"
  >
    <mat-radio-button color="primary" value="male">Male</mat-radio-button>
    <mat-radio-button value="female">Female</mat-radio-button>
  </mat-radio-group>
</li>

CSS：

.pink .mat-radio-button {
  color: pink;
}

或僅針對其中一個單選按鈕：

<div class="pink">
  <mat-radio-button value="female">Female</mat-radio-button>
</div>

動態地

或者如果您希望動態應用樣式，這里是另一個示例。

模板：

<div [ngClass]"getClass()">
  <mat-radio-button value="female">Female</mat-radio-button>
</div>

腳本：

getClass(event: Event) {
  if(/* Your conditions */)
    return ['pink']
  return []
}

堆疊閃電戰

這是我的 Stackblitz 帳戶上的一個Material Form 示例，我對其進行了編輯，以顯示您可以在上面找到的所有內容（以及更多內容），包括 Matial 主題等。在其中，我styles.scss在app.component.scss.

標籤：css 有角度的 材料-ui

上一篇：如何使用角度在復選框上啟用禁用的文本框

下一篇：如何通過Pythonpandas讀取多級JSON檔案？