更改 <md-progress-linear> 高度

Question

我无法覆盖cssfor <md-progress-linear>。

他们有以下代码来设置文件height中的进度条sass：

$progress-linear-bar-height: 5px !default;

md-progress-linear {
  height: $progress-linear-bar-height;
}

即使我改变5px了1px它仍然没有改变。忽略高度，也不会改变任何东西。

即使我把它放在我自己的sass文件中，它也不会覆盖它：

md-progress-linear {
  height: 2px !important;
}

我在这里忽略了什么吗？

$progress-linear-bar-height: 1px !default;

md-progress-linear {
  display: block;
  position: relative;
  width: 100%;
  height: $progress-linear-bar-height;

  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

 <md-progress-linear md-mode="indeterminate" ng-if="showLoader"></md-progress-linear>

Answer 1

在 Angular 15 中。这对我有用：

:host ::ng-deep mat-progress-bar {
  height: 10px;
}

:host ::ng-deep mat-progress-bar .mdc-linear-progress__bar-inner {
  border-top-width: 10px;
}

Answer 2

由于高度是在多个元素上设置的：

\n\n

md-progress-linear {\n  height: $progress-linear-bar-height;\n\n  .md-container {\n    height: $progress-linear-bar-height;\n\n    .md-bar {\n      height: $progress-linear-bar-height;\n    }\n\n    .md-dashed:before {\n      height: $progress-linear-bar-height;\n    }\n}\n

\n\n

您要么覆盖所有这些，要么像我一样这样做：

\n\n

文件variables_material.scss：

\n\n

$progress-linear-bar-height: 3px;\n

\n\n

文件main.scss：

\n\n

@import "variables_material";\n@import "vendor/angular-material/angular-material.scss"; \n\n@import \xe2\x80\xa6\n

\n\n

这会将进度条的高度配置为 3px；

\n