MDC：如何设置标签文本的样式？

Question

如何设计 label 颜色？

以下代码无效：

<style>
.mdc-floating-label{
   color: #808080;
}
.mdc-floating-label--float-above{
  color:  #808080;
}
.mdc-floating-label--shake{
  color:  #808080;
}
</style>

Answer 1

在颜色值的末尾添加 !important。

<style>
.mdc-floating-label{
   color: #808080 !important;
}
.mdc-floating-label--float-above{
  color:  #808080 !important;
}
.mdc-floating-label--shake{
  color:  #808080 !important;
}
</style>

Answer 2

您应该避免使用 !important，因为它被认为是一种不好的做法。相反，您可以通过以下方式增加 class 的权重：

<style>
label.mdc-floating-label{
   color: #808080;
}
label.mdc-floating-label--float-above{
  color:  #808080;
}
label.mdc-floating-label--shake{
  color:  #808080;
}
</style>

Answer 3

不要添加 !important 因为它不符合标准 css。添加父 class 层次结构肯定会起作用。

<style>
.mdc-text-field label.mdc-floating-label{
  color: #808080;
}
.mdc-text-field label.mdc-floating-label--float-above{
 color:  #808080;
}
.mdc-text-field label.mdc-floating-label--shake{
 color:  #808080;
}
</style>

Answer 4

请看这个：

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: orange;
}
.mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-floating-label::after,
.mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-notched-outline .mdc-floating-label::after {
  color: orange;
}

它可以工作，但是很丑:(

如果有人知道如何使用--float-above API，请告诉我...

Answer 5

在您的 .css 文件中，您必须 add/change 此行：

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input,
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: rgba(255, 255, 255, 0.87);
}

.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text,
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: rgba(255, 255, 255, 0.6);
}

.mdc-text-field .mdc-text-field__input {
  caret-color: white;
  caret-color: var(--mdc-theme-surface, white);
}

.mdc-text-field--filled .mdc-line-ripple::after {
  border-bottom-color: white;
  /* @alternate */
  border-bottom-color: var(--mdc-theme-surface, white);
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: white;
    /* @alternate */
    border-color: var(--mdc-theme-surface, white);
}

您可以将白色更改为您喜欢的颜色，但请记住也要更改变量 --mdc-theme-surface。我用 Material Component version 11.0.0 and 12.0.0

尝试了这个解决方案

MDC：如何设置标签文本的样式？

MDC: How to style label text?

html

css

mdc-components