css - 改变高度

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

以下应该工作。首先我们设置进度条容器的高度，然后设置线性条的高度，都为 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;
    }
}

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

文件变量_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-linear 元素上使用 scaleY。

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