更改<md-progress-linear>高度

Question

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

他们使用以下代码在sass文件中设置进度条的height：

$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

下面的方法应该是可行的。首先我们设置进度条容器的高度，然后设置线性条，两者都设置为20px。这两个元素共同帮助增加线性进度条的高度。

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

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

Answer 2

当在多个元素上设置高度时：

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;
    }
}

您可以覆盖所有这些内容，也可以像我这样做：

文件variables_material.scss：

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

文件main.scss：

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

@import …

这将把进度条的高度设置为3px；

Answer 3

您可以在md-progress- scaleY元素上使用进度。

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