How to change the background color of the Blazor Chip component

The Blazor Chip component has the following predefined styles that can be applied using the CssClass property.

Documentation: https://blazor.syncfusion.com/documentation/chip/customization

However, to perform your own customization of the background color for the Blazor Chip component, we can achieve this by utilizing the CssClass property.

<SfChip ID="chips">
   <ChipItems>
       @foreach (var item in ResourcenChips)
       {
           <ChipItem Text="@item.Text" Enabled="true" CssClass="@item.CssClass"></ChipItem>
       }
   </ChipItems>
</SfChip>

@code {
   public class ChipItemModel
   {
       public string Text { get; set; }
       public string CssClass { get; set; }
   }
   List<ChipItemModel> ResourcenChips = new List<ChipItemModel>
   {
       new ChipItemModel { Text = "Item 1", CssClass = "item1" },
       new ChipItemModel { Text = "Item 2", CssClass = "item2" },
       new ChipItemModel { Text = "Item 3", CssClass = "item3" },
       new ChipItemModel { Text = "Item 4", CssClass = "item4" },
       new ChipItemModel { Text = "Item 5", CssClass = "item5" },
   };
}

<style>
   #chips .e-chip.item1 {
       background: red ;
       border-color: red ;
   }
   #chips .e-chip.item2 {
       background: orange ;
       border-color: orange ;
   }
   #chips .e-chip.item3 {
       background: yellow ;
       border-color: yellow ;
   }
   #chips .e-chip.item4 {
       background: violet ;
       border-color: violet ;
   }
   #chips .e-chip.item5 {
       background: black ;
       border-color: black ;
   }
</style>

Sample: https://blazorplayground.syncfusion.com/VNLKCBLrCSstWpqI