Posted on Dec 17, 2019

Storybook + default style for all stories

Storybook is an excellent tool to improve, organize, and test your components. Today I work with ReactJS and styled-components, and storybook, but Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, Ember, Riot and Preact are currently supported.
This library has 44k+ stars on GitHub with MIT License.

Install

In the following examples the "create-react-app", "styled-components" and "storybook" will be used.

create-react-app

$ npx create-react-app my-app

$ cd my-app

$ npm install

styled-components

$ npm install --save styled-components

storybook

$ npx -p @storybook/cli sb init --type react

$ npm i -D @storybook/addon-info

Run storybook

$ npm run storybook

Note: If you had some problem to run it, try to reinstall. npm install

Global Style

I created a file "globalStyle.js" with some styles like colors, typography, etc...

import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` * { padding: 0; margin: 0; color: navy; } body { background-color: #f2f2f2; } `

How to config the loader

In the folder .storybook/ has a file with the name config.js. To apply the global style for all components into your project, you can use this code below.

Note:

you need to change the name of require.context( ) depending on the structure.

Make sure that you have react, react-dom, @babel/core, and babel-loader in your dependencies.

 import { withInfo } from "@storybook/addon-info"; import { configure, addDecorator } from "@storybook/react"; import { GlobalStyle } from "../src/globalStyle" import * as React from "react"; const req = require.context('../stories', true, /\.stories\.js$/); addDecorator(withInfo()); addDecorator(style => <><GlobalStyle />{style()}</>); configure(req, module)