Style in React Accordion component
30 Jan 20231 minute to read
The following content provides the exact CSS structure that can be used to modify the control’s appearance based on user preference.
Customizing Accordion
Use the following CSS to customize the Accordion.
.e-accordion {
border: 5px solid rgb(173, 255, 47);
}
Customizing the list items
Use the following CSS to customize the items of Accordion.
.e-accordion .e-acrdn-item {
text-align: center;
color: pink;
background-color: #2fa1ff;
}
Customizing Accordion’s header
Use the following CSS to customize the header of Accordion control.
.e-accordion .e-acrdn-item.e-select > .e-acrdn-header {
background: #2fa1ff !important;
justify-content: center;
}
Customizing Accordion’s expand and collapse icons
Use the following CSS to customize the expand and collapse icons of Accordion control.
.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-icons {
color: pink;
}
Customizing the hover state of Accordion control
Use the following CSS to customize the accordion item when hovering.
.e-accordion .e-acrdn-item .e-acrdn-header:hover {
border: 2px solid gray;
}
Customizing selected item of Accordion control
Use the following CSS to customize the selected accordion item.
.e-accordion .e-acrdn-item.e-select.e-active>.e-acrdn-header,
.e-accordion .e-acrdn-item.e-select.e-item-focus>.e-acrdn-header {
background-color: rgb(0, 15, 100) !important;
}
Use the following CSS to customize the selected accordion item text.
.e-accordion .e-acrdn-item.e-select.e-active>.e-acrdn-header .e-acrdn-header-content,
.e-accordion .e-acrdn-item.e-select.e-item-focus>.e-acrdn-header .e-acrdn-header-content {
color: #2fa1ff !important;
}