更改<md-progress-linear>高度

Question

我无法覆盖

css

为

<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

以下应该有效。首先，我们将进度条容器的高度设置为 20px，然后将线性条的高度设置为 20px。 这两个元素一起有助于增加线性进度条的高度。

md-progress-linear .md-container {
    height: 20px;
}

md-progress-linear .md-container .md-bar {
    height: 20px;
}

Answer 3

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

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

  .md-container {
    height: $progress-linear-bar-height;

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

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

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

文件变量_material.scss：

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

文件main.scss：

@import "variables_material";
@import "vendor/angular-material/angular-material.scss"; 

@import …

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

Answer 4

您可以在 md-progress-线性 元素上使用scaleY。

transform: scaleY(2);
transform-origin: bottom;

Answer 5

在 Angular Material 15 中，内部引用 CSS 变量

--mdc-linear-progress-track-height

来设置进度条的高度。开发人员未设置它并回退到 4px 的值，但您可以设置它。需要注意的是，该变量似乎没有记录，他们可能会将其视为内部实现细节。依赖它需要您自担风险。

在我的情况下，一个包含进度条的组件，我在主机上设置了这个变量并能够调整它的大小。

:host {
  --mdc-linear-progress-track-height: 12px;
}

Answer 6

在 Angular 10 中。这对我有用：

.mat-progress-bar-element {
  height: 50px !important;
}

.mat-progress-bar {
  height: 50px !important;
}

Answer 7

.mat-mdc-progress-bar {
    --mdc-linear-progress-track-height: 24px;
    --mdc-linear-progress-active-indicator-height: 24px;
}

这适用于“@angular/material”：“16.1.1”