Angular Material mat-spinner自定义颜色

6 回答

• 0

  将此代码用于** <mat-spinner> **将此代码添加到 .css 文件中

  .mat-progress-spinner circle, .mat-spinner circle {
  stroke: #3fb53f;
  }
  

  回复于 2024-04-20T21:00:14+08:00
• 0

  最好通过自定义主题来实现 .

  https://material.angular.io/guide/theming

  回复于 2024-04-20T21:00:14+08:00
• 0

  使用此代码

  <md-progress-circular md-diameter="20px"></md-progress-circular>
  
  md-progress-circular path {
    stroke: purple;
  }
  

  回复于 2024-04-20T21:00:14+08:00
• -1

  如果你们想要在网页上自定义每个微调器 . 你可以这样做：

  svg .mat-progress-spinner circle, .mat-spinner circle {
    stroke: inherit;
  }
  

  现在在mat-spinner上添加类：

  <mat-spinner class="custom-spinner-color"></mat-spinner>
  

  在css文件中：

  .withdraw-deposit-modal-spinner{
    stroke: #234188;
  }
  

  这就是我想要实现的目标 . 我想如果你寻找这个问题，你可能也想要一样 .

  回复于 2024-04-20T21:00:14+08:00
• 0

  颜色是内置的 .

  主题可以使用color属性更改progress-spinner的颜色 . 默认情况下，progress-spinners使用主题的主要颜色 . 这可以更改为“重音”或“警告” .

  https://material.angular.io/components/progress-spinner/overview

  例

  <mat-spinner color="warn"></mat-spinner>
  

  回复于 2024-04-20T21:00:14+08:00
• 9

  Easy Fix!

  在 styles.css 中添加自定义css规则而不是component.css文件

  .mat-progress-spinner circle, .mat-spinner circle {
      stroke: #2A79FF!important;
  }
  

  回复于 2024-04-20T21:00:14+08:00