改变 <md-progress-linear> 高度答案

【问题标题】：Change <md-progress-linear> height改变 <md-progress-linear> 高度
【发布时间】：2016-09-14 17:36:09
【问题描述】：

我无法为<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>

【问题讨论】：

这是 Angular 材质？请给我完整的语法。
我做了一些谷歌搜索，一切都一样。最可行的建议是编辑 angularmaterial 的主 CSS 文件，并根据您想要解决的问题编辑 <md-progress-linear> 这个标签的原始 css。

标签： css angularjs angularjs-material

【解决方案1】：

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

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

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

【讨论】：

你能解释一下它为什么起作用吗？这将为未来的读者提供更好的答案。

【解决方案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；

【讨论】：

【解决方案3】：

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

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

【讨论】：