nteract / styled-blueprintjsx

npm package that wraps Blueprint stylesheets as a styled-component global style to avoid needing a CSS loader

styled-blueprintjsx

This package wraps up Blueprint styles as a styled-components global style to subvert the need for a CSS loader.

import { BlueprintCSS } from "@nteract/styled-blueprintjsx

<React.Fragment>
  <SuperCoolComponent />
  <BlueprintCSS />
</React.Fragment>

Installation

npm install --save @nteract/styled-blueprintjsx

Documentation

With @blueprintjs/core

When working with @blueprintjs/core components, they need some globally defined (yet scoped) CSS. You can include this on the page with

import { BlueprintCSS } from "@nteract/styled-blueprintjsx

<React.Fragment>
  <SuperCoolComponent />
  <BlueprintCSS />
</React.Fragment>

With @blueprintjs/select

For @blueprintjs/select's suite of components, you need to include <BlueprintSelectCSS /> from this package.

import { BlueprintCSS, BlueprintSelectCSS } from "@nteract/styled-blueprintjsx

<React.Fragment>
  <SuperCoolComponent />
  <BlueprintCSS />
  <BlueprintSelectCSS />
</React.Fragment>

styled-blueprintjsx makes use of createGlobalStyle from styled-components and so is a React Component you can render anywhere in your app. You can read more about this pattern in the styled-components docs linked above.

Support

Please post an issue on the issue tracker.

License

BSD-3-Clause