how to customize blueprintjs appearance in create-react-app

Question

I'm new to react and I build my applications with :

create-react-app applicationame --scripts-version=react-scripts-ts

I don't use webpack because create-react-app does all for me, and I think it's just fine !

Of course I need a toolbox for smart components. Thanks for Palantir to provide such a good library for free. Blueprintjs works well with React/Typescript, [even if many classes are still not created in typescript (ex:I must use <ul> for "pt-breadcrumbs" while class Breadcrumb is provided for "pt-breadcrumb"). But apart from that the toolbox is all right.]

Now I want to customize the look&feel of the application, to meet my customer's constraint :

• background and text color
• rounded corner or not
• font family and size
• icon list
• padding of components
• transition delays
• etc.

I found nowhere a documentation to customize all this. (looking in docs, in github, making lots of googling and search in stackoverflow)

• should I add a css file in my project and override blueprintjs classes ?
• can I compose a "theme" outside of my project, and copy it in some different projets ? (like I used to do with jqueryui)
• can I do this without using webpack ? (I find this tool much too complicated)

Thanks for your help.

Answer 1

I'm evaluating Blueprint for a company standardized library of React components where we can have developers use a common look & feel. Blueprint lets you style some of the visual elements of the components but (intentionally) doesn't give you complete control without overriding the global standard stylesheet (which is what the other answers are essentially suggesting). I'd recommend you use the exposed SASS/LESS variables. Here's one way to do it without using webpack or ejecting your create-react-app project.

NOTE: this is for Blueprint v2 and I'm using react-app-rewired and SASS

• npm install node-sass-chokidar and node-sass-tilde-importer (the first will preprocess your SASS files and you need the second because Blueprint uses the "~" convention for imports that webpack uses but the default node-sass does not support)

• add a "build-css" script reference to your package that will look similar to this (it tells node-sass-chokidar to use the tilde-importer package):

  "build-css": "node-sass-chokidar --importer=node_modules/node-sass-tilde-importer --include-path ./src --include-path ./node_modules src/ -o src/"

• Add a SASS file, like App.scss to the location referenced above (src/):

`

// override the blueprint default variable values first
$pt-intent-danger:  #ff3d00;
$pt-intent-primary: #076461;

// then pull in top-level blueprint sass file (it imports all the sub-files)
@import "@blueprintjs/core/src/blueprint.scss";

// add custom variables (optional)
$sassy-text: #ff3d7f;
$sassy-background: #c2a34f;

//add your own custom styles (optional)
.sassy-hello {
   color:$sassy-text;
   background:$sassy-background;
   padding: 5px;
}

• Run your build css script:

  npm run build-css

NOTE there's a known issue with the node-sass-chokidar file watcher and some editors. It is very lightweight and fast; if your editor holds a lock for a few moments (like VS Code) on the updated .scss file the auto-build script will fail. Just run the manual build step above and the watch-triggered rebuild will work correctly.

• reference (or review) your generated .css file. It will be the combination of the Blueprint css file and your customizations. You can reference it normally in html:

  <link href="App.css" rel="stylesheet" />

  or in your code:

  import './App.css';

  then use it as required:

  <h1 className="sassy-hello">Hey, Good-Looking!</h1>

You can always add custom stylesheet(s) that override or supplement the core styles, but If you're trying to build your own consistent theme on top of Blueprint I think this is the way to go. You can also inline or CSS-to-JS your styles as desired/required.

Answer 2

So the easiest way would be to pass in your custom style via React's Component Styles.

Let's say we want to change the font-size and color of the text within the <Button> component.

We first declare our style:

const buttonStyle = {
 fontSize: '30pt',
 color: 'pink',
 height: '40pt'
}

And then within the React classes render() pass in that new style to your <Button> component:

<Button className="pt-intent-primary" text="My button" style={buttonStyle}/>

Answer 3

I would recommend creating your own theme in (i.e. myTheme.css).

.pt-myTheme {
  .pt-navbar {
    background-color: #2364f0;
  }
}

in React just add it to Blueprint components directly:

render() {
  <Navbar className="pt-myTheme"></Navbar>
}

Or to a container in your app root:

render() {
  <div className="container pt-myTheme">
    <Navbar>
      ...
    </Navbar>
  </div>
}