0

如何设置标签颜色的样式？

在此处输入图像描述

以下代码不起作用：

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

5 回答 5

2

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

<style>
label.mdc-floating-label{
   color: #808080;
}
label.mdc-floating-label--float-above{
  color:  #808080;
}
label.mdc-floating-label--shake{
  color:  #808080;
}
</style>
于 2019-05-03T08:33:49.353 回答
0

在您的 .css 文件中，您必须添加/更改以下行：

.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);
}

您可以用自己喜欢的颜色更改白色，但请记住也要更改 var --mdc-theme-surface。我用Material Component 版本 11.0.0和12.0.0尝试了这个解决方案

于 2021-09-08T08:59:48.207 回答
0

不要添加!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>
于 2019-05-03T09:15:09.977 回答
0

提这个：

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

于 2019-10-31T21:01:20.493 回答
0

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

<style>
.mdc-floating-label{
   color: #808080 !important;
}
.mdc-floating-label--float-above{
  color:  #808080 !important;
}
.mdc-floating-label--shake{
  color:  #808080 !important;
}
</style>
于 2019-05-03T08:29:25.320 回答