角材料在全球范围内提高对比度？

Question

我正在尝试整理一些基本的反应形式。

我们遇到的问题是我们的合规部门不会让我们通过，因为材料表单字段的所有对比度都太透明/太浅了。

我正在寻找一种方法来使所有表单字段、轮廓、禁用文本等变暗。

我一直在尝试通过进入我的主要样式表使其全球化。但是我似乎无法弄清楚如何以这种方式覆盖材料。

我在 scss 中尝试了以下内容：

.mat-input-element:disabled .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
  opacity: 1.0 !important;
}

.mat-input-element .mat-form-field-autofill-control .ng-tns-c161-25 .ng-untouched .ng-pristine .cdk-text-field-autofill-monitored {
    opacity: 1.0 !important;
}

或更高的主题：

// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 1.0);
$dark-accent-text: rgba($dark-primary-text, 1.0);
$dark-disabled-text: rgba($dark-primary-text, 1.0);
$dark-dividers: rgba($dark-primary-text, 1.0);
$dark-focused: rgba($dark-primary-text, 1.0);

$mat-light-theme-foreground: ( base: black, divider: $dark-dividers, dividers: $dark-dividers, disabled: $dark-disabled-text, disabled-button: rgba($dark-text, 0.26), disabled-text: $dark-disabled-text, elevation: black, secondary-text: $dark-accent-text, hint-text: $dark-disabled-text, accent-text: $dark-accent-text, icon: $dark-accent-text, icons: $dark-accent-text, text: $dark-primary-text, slider-min: $dark-primary-text, slider-off: rgba($dark-text, 0.26), slider-off-active: $dark-disabled-text, );

// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 1.0);
$light-disabled-text: rgba($light-primary-text, 1.0);
$light-dividers: rgba($light-primary-text, 1.0);
$light-focused: rgba($light-primary-text, 1.0);

$mat-dark-theme-foreground: ( base: $light-text, divider: $light-dividers, dividers: $light-dividers, disabled: $light-disabled-text, disabled-button: rgba($light-text, 0.3), disabled-text: $light-disabled-text, elevation: black, hint-text: $light-disabled-text, secondary-text: $light-accent-text, accent-text: $light-accent-text, icon: $light-text, icons: $light-text, text: $light-text, slider-min: $light-text, slider-off: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3), );

这些方法似乎都不会以任何方式影响项目和组件。

有没有一种方法可以让全局范围内所有表单字段的对比度变暗？无需求助于指令或不必在每个 component.css 中包含相同的手动 css 吗？

非常感谢。

编辑：我正在努力克服这个非常透明的问题。

Answer 1

您应该能够覆盖大部分mat-form-field 规则以满足您的要求。以下是一些示例，您可以将其添加到顶级样式表中以实现“填充”外观：

.mat-form-field-appearance-fill {
  .mat-form-field-label {
    color: rgba(0, 0, 0, 1) !important;
  }
  .mat-form-field-flex {
    background-color: rgba(0, 0, 0, 0.08);
  }
}

.mat-form-field-appearance-fill.mat-form-field-disabled {
  .mat-form-field-label {
    color: rgba(0, 0, 0, 0.8) !important;
  }
  .mat-form-field-flex {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

https://stackblitz.com/edit/angular-a7hisy?file=src%2Fstyles.scss

---

对于appearance="outline"

.mat-form-field-appearance-outline {
  .mat-form-field-label {
    color: rgba(0, 0, 0, 1) !important;
  }
  .mat-form-field-outline {
    color: rgba(0, 0, 0, 0.4);
  }
}

.mat-form-field-appearance-outline.mat-form-field-disabled {
  .mat-form-field-label {
    color: rgba(0, 0, 0, 0.8) !important;
  }
  .mat-form-field-outline {
    color: rgba(0, 0, 0, 0.2);
  }
}

https://stackblitz.com/edit/angular-jy3hjq?file=src%2Fapp%2Fform-field-appearance-example.html