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>
label.mdc-floating-label{
   color: #808080;
}
label.mdc-floating-label--float-above{
  color:  #808080;
}
label.mdc-floating-label--shake{
  color:  #808080;
}
</style>

Answer 2

在颜色值的末尾添加!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 3

请勿添加！important ，因为它不符合标准CSS。添加父类层次结构，它肯定会工作。

<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，请告诉我...