Question

我尝试将md-progress-circle对象的颜色更改为自定义颜色。

<md-progress-circle mode="determinate"></md-progress-circle>

我该怎么办？没有要复制或覆盖的类。在progress-circle.js我发现了这一行：

styles: [
    ... 
    :host path { 
        fill: transparent; 
        stroke: #00897b; 

        /** Stroke width of 10px defines stroke as 10% of the viewBox */ 
        stroke-width: 10px; 
    } 
    ...
]

Answer 1

您可以尝试以这种方式覆盖样式：

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (parentAnnotation[key] !== undefined && parentAnnotation[key] !== null) {
        if(Array.isArray(parentAnnotation[key])) {
          annotation[key] = [...parentAnnotation[key], ...annotation[key]];
        } else {
          annotation[key] = parentAnnotation[key];
        }
      }
    });
    var metadata = new ComponentMetadata(annotation);
    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

@CustomComponent({
  styles: [`
     :host path { 
        stroke: red; 
    } 
  `]
})
export class CustomMdProgressCircle extends MdProgressCircle {
  constructor(_changeDetectorRef: ChangeDetectorRef) {
    super(_changeDetectorRef); 
  }
}

我已创建覆盖原始CustomMdProgressCircle的自定义组件MdProgressCircle 然后你需要像这样使用它：

directives: [CustomMdProgressCircle]

这是一个plunkr示例https://plnkr.co/edit/1sROtfRVOOfnpa5C9HFw?p=preview

希望它可以帮到你！

Answer 2

在Angular 2（和Material 2）中：因为它是一个SVG元素，你可以像这样重新定义它的CSS样式：

.mat-spinner path {
  stroke: #cccccc;
  stroke-width: 1px !important;
}

md-progress-circle angular2-material的自定义颜色

2 个答案: