可以调整mat-form-field-outline的粗细吗？

Question

我正在尝试设置角度材质的输入样式，使其看起来与此应用程序中的所有输入相同。

是否可以调整明细表输入轮廓的粗细，使其与项目输入边框的宽度相同？

Answer 1

要重写的类是：

.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-end,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-gap {
    border-width: 1px !important;
}

确保您使用

border-width

而不是

border

Answer 2

您是否尝试过编辑时间表输入本身的宽度？

如果没有任何变化，可以尝试将

!important

标签添加到 css 中以覆盖给定的宽度（并匹配其他输入的宽度）。

Answer 3

这对我有用：

.mat-form-field-outline-start, .mat-form-field-outline-end, .mat-form-field-outline-gap {
  border-width: 2px !important;
}

Answer 4

角度+15

经过我的搜索，我找到了一种简单的方法，无需 ng-deep 或 !important

我们可以通过此代码更改颜色或厚度（宽度） 我把它放在style.scss中的body中

对于普通：--mdc-outlined-text-field-outline

对于悬停：--mdc-outlined-text-field-hover-outline

焦点：--mdc-outlined-text-field-focus-outline

之后添加-color或-width

body {
      --mdc-outlined-text-field-outline-color: #d0d5dd;
      --mdc-outlined-text-field-hover-outline-color: #d0d5dd;
      --mdc-outlined-text-field-hover-outline-width: 0.5px;
      --mdc-outlined-text-field-focus-outline-color: #d0d5dd;
      --mdc-outlined-text-field-focus-outline-width: 0.5px;
  }

简单的自定义输入轮廓