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 variety of styling tips.

The default stylesheet comes in CSS and SCSS flavors. Either will allow you to override the default values and tweak styles without having to replicate the entire rule set.

To load only the default layout/structural values (flex-direction, gap, alignment, etc.—without background-color, border-style, or other decorative styles), import query-builder-layout.css (or .scss) instead.

CSS

@import 'react-querybuilder/dist/query-builder.css';
/* OR, for layout only: */
@import 'react-querybuilder/dist/query-builder-layout.css';

SCSS

@use 'react-querybuilder/dist/query-builder.scss';
// OR, for layout only:
@use 'react-querybuilder/dist/query-builder-layout.scss';

CSS variables

Customize the default stylesheet by overriding the CSS (or SCSS) variables.

info

CSS variables were introduced to React Query Builder in v8.3.0 and SCSS variables have been available since v4.0.0. Both methods will be supported going forward.

The default variables include:

CSS

:root {
  --rqb-spacing: 0.5rem;
  --rqb-border-width: 1px;
  --rqb-background-color: #004bb733;
  --rqb-border-color: #8081a2;
  --rqb-border-style: solid;
  --rqb-border-radius: 0.25rem;
}

SCSS

$rqb-spacing: 0.5rem;
$rqb-border-width: 1px;
$rqb-background-color: #004bb733;
$rqb-border-color: #8081a2;
$rqb-border-style: solid;
$rqb-border-radius: 0.25rem;

Example:

CSS

@import 'react-querybuilder/dist/query-builder.css';

:root {
  --rqb-spacing: 0.8rem; /* a little roomier than the default 0.5rem */
  --rqb-background-color: #ccc3; /* gray, semi-transparent background */
}

SCSS

@use 'react-querybuilder/dist/query-builder' with (
  $rqb-spacing: 0.8rem, /* a little roomier than the default 0.5rem */
  $rqb-background-color: #ccc3 /* gray, semi-transparent background */
);

SCSS variables

SCSS variables begin with $ instead of --, but otherwise have the same name as their CSS counterpart (e.g., $rqb-spacing corresponds to --rqb-spacing).

Using SCSS has the advantage of allowing you to customize the CSS variable prefix (rqb- by default) by setting $rqb-var-prefix.

@use 'react-querybuilder/dist/query-builder' with (
  $rqb-var-prefix: myprefix-,
  $rqb-spacing: 0.8rem
);

:root {
  --myprefix-background-color: #ccc3;
}

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, branch lines use the same color, width, and style as the group borders. The following variables can be overridden to customize the branch lines.

CSS

:root {
  --rqb-branch-indent: var(--rqb-spacing);
  --rqb-branch-width: var(--rqb-border-width);
  --rqb-branch-color: var(--rqb-border-color);
  --rqb-branch-radius: var(--rqb-border-radius);
  --rqb-branch-style: var(--rqb-border-style);
}

SCSS

$rqb-branch-indent: $rqb-spacing;
$rqb-branch-width: $rqb-border-width;
$rqb-branch-color: $rqb-border-color;
$rqb-branch-radius: $rqb-border-radius;
$rqb-branch-style: $rqb-border-style;

Drag-and-drop

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

CSS

:root {
  --rqb-dnd-drop-indicator-color: rebeccapurple;
  --rqb-dnd-drop-indicator-copy-color: #669933;
  --rqb-dnd-drop-indicator-style: dashed;
  --rqb-dnd-drop-indicator-width: 2px;
}

SCSS

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

// Deprecated variable names (still work)
// $rqb-dnd-hover-border-bottom-color: rebeccapurple;
// $rqb-dnd-hover-copy-border-bottom-color: #669933;
// $rqb-dnd-hover-border-bottom-style: dashed;
// $rqb-dnd-hover-border-bottom-width: 2px;

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 "copy" modifier key is pressed (Alt on Windows/Linux, ⌥ Option on macOS; see Drag-and-drop § Cloning and grouping for more information)
• dndGroup: Assigned to a drop target when the cursor hovers over it while the "group" modifier key is pressed (Ctrl; see Drag-and-drop § Cloning and grouping for more information)