https://github.com/Sambego/storybook-styles

Add custom styles to the storybook preview panel
https://github.com/Sambego/storybook-styles

Last synced: 2 months ago
JSON representation

Add custom styles to the storybook preview panel

• Host: GitHub
• URL: https://github.com/Sambego/storybook-styles
• Owner: Sambego
• License: mit
• Created: 2017-10-10T17:48:19.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-11T08:43:00.000Z (almost 8 years ago)
• Last Synced: 2025-04-12T07:59:28.153Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 249 KB
• Stars: 24
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Authors: AUTHORS

Awesome Lists containing this project

README

        
# Storybook styles

This [storybook](https://storybook.js.org/) decorator allows you to add custom styles to the storybook preview panel.

![Screenshot of a styles storybook preview](./storybook-styles.png)

### Getting Started

```sh

npm install --save @sambego/storybook-styles

```

Then write your stories like this:

```js

import React from 'react';

import { storiesOf } from "@storybook/react";

import styles from "@sambego/storybook-styles";

storiesOf("Button", module)

  .addDecorator(styles({

    fontFamily: 'Helvetica, Arial, sans-serif',

    background: '#e1ecfa',

    display: 'flex',

    alignItems: 'center',

    justifyContent: 'center',

    height: '500px',

  }))

  .add("with text", () => Click me);

```

The style decorator accepts a JavaScript object with camelCased style properties which will be applied around the content of the preview area.