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#L58-L61

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

ANDOR

First nameLast name=!=<><=>=containsbegins withends withdoes not containdoes not begin withdoes not end withis nullis not nullinnot inbetweennot between

ANDOR

First nameLast name=!=<><=>=containsbegins withends withdoes not containdoes not begin withdoes not end withis nullis not nullinnot inbetweennot between

First nameLast name=!=<><=>=containsbegins withends withdoes not containdoes not begin withdoes not end withis nullis not nullinnot inbetweennot between

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#L85-L87

Drag-and-drop

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

$rqb-dnd-drop-indicator-color: rebeccapurple !default;
$rqb-dnd-drop-indicator-copy-color: #669933 !default;
$rqb-dnd-drop-indicator-style: dashed !default;
$rqb-dnd-drop-indicator-width: 2px !default;

// Deprecated variable names (still work)
// $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#L30-L39

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)