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

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), );

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

有没有一种方法可以让我在全局范围内使所有表单字段的对比度变暗？无需求助于指令或必须将相同的手动 css 包含到每个 component.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