Question

我现在正在努力工作几个小时。我使用Material2，只是想改变进度条的颜色。我知道有那些主题（主要/重音/警告），但我希望我的进度条有一个cutom颜色（绿色）。

我已经尝试过最狡猾的css-combination ..但是没有努力。也许有人有同样的问题？

Answer 1

您可以使用::ng-deep选择器来实现所需的功能，this answer上有一些信息。

我是怎么做到的：

CSS

::ng-deep .mat-progress-bar-fill::after {
    background-color: #1E457C;
}

::ng-deep .mat-progress-bar-buffer {
    background: #E4E8EB;
}

::ng-deep .mat-progress-bar {
    border-radius: 2px;
}

HTML

<mat-progress-bar  mode="determinate" value="{{progress}}"></mat-progress-bar>

结果是这样的：

编辑：

我找到了一种避免使用::ng-deep的方法，因为它将很快从角钢中删除。看来，如果您将样式从component.css文件移到全局 styles.css 文件，则无需::ng-deep就可以使用。

因此，上面定义的样式可以更改

mat-progress-bar .mat-progress-bar-buffer {
  background: #E4E8EB;
}

将其移动到 styles.css ，它将像这样应用：

这对我来说是一个新项目。我没有专门检查旧代码，但条件相同，没有理由不起作用。

Answer 2

更新：

避免使用深层， TL; DR ：Deep在技术上无效（例如，Deeprecated：p）

有关更多信息，请参见：The use of /deep/ and >>> in Angular 2

现在，要更改垫进度条的颜色，这就是我的工作方式，

转到您的styles.scss文件（或项目中的主要css / scss文件）

添加此类->

.green-progress .mat-progress-bar-fill::after {
    background-color: green !important;
}

您的mat-progress应该使用上述类，例如->

<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>

Answer 3

到目前为止，没有人提到...

他就是我解决的方式。

@Meet Dave对他的方法是正确的。但是您应该使用encapsulation: ViewEncapsulation.None（禁用CSS模块）

类似这样的东西：

组件

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})

无礼（以我为例）

.audio-progress-bar {
  &.mat-progress-bar {
    height: 10px;
  }

  .mat-progress-bar-fill::after {
    background-color: #37474f;
  }

  .mat-progress-bar-buffer {
    background-color: #90a4ae;
  }

  /* remove animation and the dots*/ 
  .mat-progress-bar-background {
    animation: none;
    background-color: #eceff1;
    fill: #eceff1;
  }
}

查看

<mat-progress-bar
  class="audio-progress-bar"
  mode="buffer"
></mat-progress-bar>

Answer 4

我建议将其中一种预制的主要/警告/强调颜色更改为您的自定义颜色。

在styles.scss中（如果您的样式文件是css，则必须将其更改为支持scss）：

  @import '~@angular/material/theming';
  // Plus imports for other components in your app.

  // Include the common styles for Angular Material. We include this here so that you only
  // have to load a single css file for Angular Material in your app.
  // Be sure that you only ever include this mixin once!
  @include mat-core();

  // Define the palettes for your theme using the Material Design palettes available in palette.scss
  // (imported above). For each palette, you can optionally specify a default, lighter, and darker
  // hue.

  $mat-blue: (
    50: #e3f2fd,
    100: #bbdefb,
    200: #90caf9,
    300: #64b5f6,
    400: #42a5f5,
    500: #2196f3,
    600: #1e88e5,
    700: #1976d2,
    800: #1565c0,
    900: #0d47a1,
    A100: #82b1ff,
    A200: #448aff,
    A400: #2979ff,
    A700: #2B66C3,
    contrast: (
      50: $black-87-opacity,
      100: $black-87-opacity,
      200: $black-87-opacity,
      300: $black-87-opacity,
      400: $black-87-opacity,
      500: white,
      600: white,
      700: white,
      800: $white-87-opacity,
      900: $white-87-opacity,
      A100: $black-87-opacity,
      A200: white,
      A400: white,
      A700: white,
    )
  );

  $candy-app-primary: mat-palette($mat-blue, A700);
  $candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);

  // The warn palette is optional (defaults to red).
  $candy-app-warn:    mat-palette($mat-red);

  // Create the theme object (a Sass map containing all of the palettes).
  $candy-a-theme($candy-app-theme);
pp-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

  // Include theme styles for core and each component used in your app.
  // Alternatively, you can import and @include the theme mixins for each component
  // that you are using.
  @include angular-material

Answer 5

对我来说，我只需要将此规则放在CSS中：

div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after{ background-color: green; }

但是显然，使用主题很容易。

Answer 6

Angular 7和材质7.1.1

 ::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
        stroke: green !important; 
}

Answer 7

Angular 8解决方案：

对我来说，这是将样式放在顶级.scss文件中。还必须在.scss中进行如下选择：

html：


<mat-progress-bar [ngClass]="passwordStatusBarColor" 
                  aria-label="Password strength meter"
                  mode="determinate"
                  [value]="progress">
</mat-progress-bar>

<!--passwordStatusBarColor could be 'weak', 'weakest', etc. with a corresponding rule-->

styles.scss：

.weakest {
  .mat-progress-bar-fill::after {
    background-color: yellow;
  }
}

Answer 8

您可以在styles.scss中添加自定义类并将样式添加到同一类中（带有！important）。

getDisplayMedia

或者您可以使用现有类将已定义的css属性添加到全局styles.scss文件中，以覆盖它们。

.your-custom-class{
  background-color: colorname !important;
}

Answer 9

不使用 ::ng-deep、ViewEncapsulation 或主题，我们可以通过在 style.scss 中放置以下代码，使用干净的 scss 自定义进度条：

.mat-progress-bar {
    .mat-progress-bar-fill::after{
        background: #007bff;
    }
    .mat-progress-bar-buffer{
        background: white;
    }
}

.mat-progress-bar[mode=indeterminate] {
    .mat-progress-bar-fill::after{
        animation-duration: 1000ms !important;
    }
    animation-duration: 1000ms !important;
    .mat-progress-bar-primary{
        .mat-progress-bar-fill::after{
            animation-duration: 1000ms !important;
        }
        animation-duration: 1000ms !important;
    }
    .mat-progress-bar-secondary {
        .mat-progress-bar-fill::after{
            animation-duration: 1000ms !important;
        }
        animation-duration: 1000ms !important;
    }
}

在 style.scss 中使用上述样式模式，我几乎可以自定义进度条的任何方面。我们可以根据我们使用的进度条类型调整模式。

Answer 10

更改组件 typeDecorator 中的配置：

encapsulation: ViewEncapsulation.None

然后...

.mat-progress-bar-fill::after {
  background-color: $color;
}

Answer 11

您可以通过此方法添加自定义类仅覆盖进度条backgroud-color，然后通过标记和类的组合应用css，如 -

<mat-progress-bar class="my-color" mode="determinate" value="40"></mat-progress-bar>

转换为style.css

mat-progress-bar.my-color .mat-progress-bar-fill::after { background-color: green; }

角度 - 材质：进度条自定义颜色？

11 个答案: