Style and appearance in React Query Builder component

2 Mar 20261 minute to read

Customize the Query Builder appearance by overriding its default CSS styles. The following table lists the CSS classes and their corresponding Query Builder components. Additionally, you can create custom themes using the Theme Studio.

CSS Class	Purpose
.e-group-header .e-btn	Customize the condition button
.e-group-body .e-rule-container	Customize the rule container
.e-group-container .e-group-header .e-dropdown-btn	Customize the Add Group/Condition button
.e-query-builder .e-group-header .e-deletegroup	Customize the Delete Group button
.e-query-builder .e-rule-field .e-rule-value-delete .e-rule-delete	Customize the Delete Condition button
.e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before	Customize group joining lines
.e-query-builder .e-rule-container.e-joined-rule	Customize condition joining lines