diff --git a/components/tag/nz-tag.component.ts b/components/tag/nz-tag.component.ts index b7fcf163116..9c23c13c90d 100644 --- a/components/tag/nz-tag.component.ts +++ b/components/tag/nz-tag.component.ts @@ -124,10 +124,11 @@ export class NzTagComponent implements OnInit, AfterViewInit { } updateClassMap(): void { + const isPresetColor = this.isPresetColor(this.nzColor); this.classMap = { [ `ant-tag` ] : true, - [ `ant-tag-has-color` ] : this.isPreset === false, - [ `ant-tag-${this.nzColor}` ] : this.isPreset === true, + [ `ant-tag-has-color` ] : this.nzColor && !isPresetColor, + [ `ant-tag-${this.nzColor}` ] : isPresetColor, [ `ant-tag-checkable` ] : this.nzMode === 'checkable', [ `ant-tag-checkable-checked` ]: this.nzChecked }; diff --git a/components/tag/nz-tag.spec.ts b/components/tag/nz-tag.spec.ts index 32912ffe8b7..32ee003d8ce 100644 --- a/components/tag/nz-tag.spec.ts +++ b/components/tag/nz-tag.spec.ts @@ -60,7 +60,7 @@ describe('tag', () => { })); it('should color work', () => { fixture.detectChanges(); - expect(tag.nativeElement.firstElementChild.classList).toContain('ant-tag-has-color'); + expect(tag.nativeElement.firstElementChild.classList).not.toContain('ant-tag-has-color'); testComponent.color = 'green'; fixture.detectChanges(); expect(tag.nativeElement.firstElementChild.classList).toContain('ant-tag-green'); @@ -73,6 +73,17 @@ describe('tag', () => { expect(tag.nativeElement.firstElementChild.classList).toContain('ant-tag-green'); expect(tag.nativeElement.firstElementChild.style.backgroundColor).toBe(''); }); + it('issues #1176', () => { + testComponent.color = 'green'; + fixture.detectChanges(); + expect(tag.nativeElement.firstElementChild.classList).toContain('ant-tag-green'); + testComponent.color = ''; + fixture.detectChanges(); + expect(tag.nativeElement.firstElementChild.classList).not.toContain('ant-tag-has-color'); + testComponent.color = undefined; + fixture.detectChanges(); + expect(tag.nativeElement.firstElementChild.classList).not.toContain('ant-tag-has-color'); + }); }); describe('prevent tag', () => { let fixture;