Styling BlueprintJS

BlueprintJS is built to be restyled. This is a guide to help explain how to properly do so.

Sass Variables

Nearly every aspect of Blueprint’s styling is based on sass variables. They define their variables to allow for consumers’ values to take precedence if defined first.

$pt-text-color: $dark-gray1 !default;
$pt-text-color-muted: $gray1 !default;
$pt-text-color-disabled: rgba($pt-text-color-muted, 0.5) !default;
$pt-heading-color: $pt-text-color !default;

^{— From Blueprint's _color-alias.scss}

The !default means “Use this value, unless the variable has already been defined”. Therefore, if we set the variable in our own scss files before importing Blueprint’s scss, our variables will take precedence.

When variables aren’t enough

Sometimes changing sass variables isn’t enough to override Blueprint’s styles. In those cases, we have to resort to providing scss of our own that supersedes theirs.

Note the order of imports found in remarkable-ui.scss:

/* Import files that preset variables we want to change from the defaults */
@import "theme";
@import "typography";
@import "buttons";
...

@import "@blueprintjs/core/src/blueprint.scss";
@import "@blueprintjs/select/src/blueprint-select.scss";
...

/* Overrides occur after blueprint so we can override their output */
@import "typography.overrides";
@import "buttons.overrides";
...

We first import files that set variables. We then import Blueprint’s scss, which will take our variables, instead of using their defaults. Finally, we include any scss overrides.

Be sure to use the _filename.overrides.scss filename convention to ensure it is clear if the styles are meant to override existing Blueprint styles.