Skip to main content
Version: v7

Styling overview

React Query Builder has a flexible structure with specific classes assigned to each element in the component hierarchy, enabling a wide range of styling possibilities.

tip

Check out the customization showcase for a wide variety of styling tips.

The default stylesheet comes in CSS and SCSS flavors. Using SCSS allows you to override variables and tweak styles without having to replicate the entire rule set.

import 'react-querybuilder/dist/query-builder.scss'; // recommended
// OR
import 'react-querybuilder/dist/query-builder.css';

Layout only

To load the default layout values only, without background-color, border-style, or other decorative styles, import "react-querybuilder/dist/query-builder-layout.scss" (or css) instead. This will define flex-direction, gap, alignment, etc.

import 'react-querybuilder/dist/query-builder-layout.scss'; // recommended
// OR
import 'react-querybuilder/dist/query-builder-layout.css';

SCSS variables

The default SCSS variables for layout include:

$rqb-spacing: 0.5rem !default;
$rqb-border-width: 1px !default;

Source: /packages/react-querybuilder/src/query-builder-layout.scss#L12-L13

And the variables for decorative styles are:

$rqb-background-color: rgba(0, 75, 183, 0.2) !default;
$rqb-border-color: #8081a2 !default;
$rqb-border-style: solid !default;
$rqb-border-radius: 0.25rem !default;

Source: /packages/react-querybuilder/src/query-builder.scss#L15-L18

Branch lines

To add branch lines to the left side of rule groups, add the queryBuilder-branches class to the query builder using the controlClassnames prop, or to any ancestor element.

<QueryBuilder
controlClassnames={{ queryBuilder: 'queryBuilder-branches' }}
/>
https://example.com

The branch lines are colored red in the example above to stand out, but by default the branch lines use the same color, width, and style as the group borders. The following SCSS variables can be overridden to customize the branch lines.

$rqb-branch-indent: $rqb-spacing !default;
$rqb-branch-width: $rqb-border-width !default;

Source: /packages/react-querybuilder/src/query-builder-layout.scss#L17-L18

$rqb-branch-color: $rqb-border-color !default;
$rqb-branch-radius: $rqb-border-radius !default;
$rqb-branch-style: $rqb-border-style !default;

Source: /packages/react-querybuilder/src/query-builder.scss#L29-L31

Drag-and-drop

When drag-and-drop is enabled, the following variables control styles for the dragged and hovered elements.

$rqb-dnd-hover-border-bottom-color: rebeccapurple !default;
$rqb-dnd-hover-copy-border-bottom-color: #669933 !default;
$rqb-dnd-hover-border-bottom-style: dashed !default;
$rqb-dnd-hover-border-bottom-width: 2px !default;

Source: /packages/react-querybuilder/src/query-builder.scss#L22-L25

You can also assign styles to the following classes.

  • dndDragging: Assigned to the clone of the dragged element (the "ghost" that follows the mouse cursor)
  • dndOver: Assigned to a drop target when the cursor hovers over it
  • dndCopy: Assigned to a drop target when the cursor hovers over it while the modifier key is pressed (Alt on Windows/Linux, Option/ on Mac)