Modify chip text color

[Jason Streit]

Is there a way to set each chip in a list to a different color?  I can use the .e-chip .e-chip-text to change if for all but I want to change it for a specific chip list and each row a different color.  TIA

[Muthukrishnan Kandasamy]

 

Hi Jason, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement in Syncfusion Chip component. Yes, we can set different color for each chip item. We have provided cssClass property for Chip component to customize the CSS of chip item. By using this property, we can add different custom class for each chip item and we can add the required styles using this custom class. Please refer to the below code block. 

 

[Index.js] 

 

<ChipListComponent id="chip-default"> 

 <ChipsDirective> 

   <ChipDirective text="Apple" cssClass="e-pink"></ChipDirective> 

   <ChipDirective text="Microsoft" cssClass="e-blue"></ChipDirective> 

   <ChipDirective text="Google" cssClass="e-green"></ChipDirective> 

   <ChipDirective text="Tesla" cssClass="e-orange"></ChipDirective> 

   <ChipDirective text="Intel" cssClass="e-red"></ChipDirective> 

  </ChipsDirective> 

 </ChipListComponent> 

 

 

[Index.css] 

 

.e-chip-list .e-pink{ 

  color: pink; 

} 

.e-chip-list .e-green { 

  color: green; 

} 

 

.e-chip-list .e-red { 

  color: red; 

} 

.e-chip-list .e-orange { 

  color: orange; 

} 

.e-chip-list .e-blue { 

  color: blue; 

} 

 

 

 

We have prepared a sample to meet your requirement, please refer to the below link for the sample. 

 

https://stackblitz.com/edit/react-ej2-chip?file=index.js 

 

Documentation: https://ej2.syncfusion.com/react/documentation/chips/getting-started/ 

 

Demo: https://ej2.syncfusion.com/react/demos/#/material/chips/default 

 

API reference: https://ej2.syncfusion.com/react/documentation/api/chips/chipListComponent/ 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K