如何更改材质组件 Web 上的文本字段颜色

Question

我正在使用谷歌材料组件网络，我正在尝试更改此文本字段的轮廓颜色（希望在聚焦时更改轮廓和文本颜色）。

代码是：

<label class="mdc-text-field mdc-text-field--outlined">
  <span class="mdc-notched-outline">
    <span class="mdc-notched-outline__leading"></span>
    <span class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="my-label-id">Your Name</span>
    </span>
    <span class="mdc-notched-outline__trailing"></span>
  </span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id">
</label>

我目前尝试更改--mdc-theme-primary，但这仅更改轮廓颜色，而不更改焦点时文本的颜色。

Answer 1

设置轮廓的默认颜色

.mdc-text-field--outlined .mdc-notched-outline {
     border-color: #999;
}

设置聚焦时轮廓的颜色

.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline {
     border-color: #007bff;
}

---

设置标签的默认颜色

.mdc-floating-label {
     color: #999;
}

设置焦点时标签的颜色

.mdc-text-field--outlined.mdc-text-field--focused .mdc-floating-label {
     color: #007bff;
}