Style in React Chips component

27 Dec 20241 minute to read

The following content provides the exact CSS structure that can be used to modify the component’s appearance based on user preferences.

Customizing the chip text

Use the following CSS to customize the chip text properties.

.e-chip .e-chip-text {
    font-size: 20px;
    color: black;
    font-weight: normal;
}

Customizing the chip icon

Use the following CSS to customize the chip icon properties.

.e-chip .e-icon {
    background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png');
    opacity: 0.8;
}

Customizing the chip delete button

Use the following CSS to customize the chip delete button appearance.

.e-chip-list .e-chip .e-chip-delete.e-dlt-btn {
    color: #e3165b;
    font-size: 12px;
}

Customizing the chip outline

Use the following CSS to customize the chip outline.

.e-chip-list .e-chip.e-outline {
    border-color: #e3165b;
    border-width: 3px;
}

Customizing the chip on selection

Use the following CSS to customize the chip on selection.

/* To customize single chip on selection */
.e-chip-list.e-selection .e-chip.e-active {
    background-color: #ffca1c;
    color: #e3165b;
}

/* To customize multiple chip on selection */
.e-chip-list .e-chip.e-active {
    background-color: #e3165b;
    color: white;
}

Customizing the chip avatar text

Use the following CSS to customize the chip avatar text properties.

.e-chip-list .e-chip .e-chip-avatar {
    background-color: #d51a1a;
    color: #fafafa;
}