Storybook: Storybook (with addon-info) + Styled Components

Created on 29 Jun 2017 · 2Comments · Source: storybookjs/storybook

Hey,

I am using storybook (with info addon) at web React app. At the same app I am using styled components (https://www.styled-components.com/).

Here is simple case how I am doing this:

__LayoutHeader.js__

import styled from 'styled-components';

const LayoutHeader = styled.div`
  color: #fff;
  background-color: #000;
`;

export default LayoutHeader;

__LayoutHeader.story.js__

import { storiesOf } from '@storybook/react';
import React from 'react';

import LayoutHeader from './LayoutHeader';

storiesOf('LayoutHeader', module)
.addWithInfo('with text', () => (
  <LayoutHeader>Simple text</LayoutHeader>
));

The problem is the storybook info output looks like this:

download

Can I somehow process the story so it renders story content as <LayoutHeader /> instead of <styled.div />?

info compatibility with other tools question / support

Source

michaltaberski

Most helpful comment

I am sorry, my question was too hasty.

The solution is:

__LayoutHeader.js__

import styled from 'styled-components';

const LayoutHeader = styled.div`
  color: #fff;
  background-color: #000;
`;

LayoutHeader.displayName = 'LayoutHeader';
export default LayoutHeader;

michaltaberski on 29 Jun 2017

👍4

All 2 comments

I am sorry, my question was too hasty.

The solution is:

__LayoutHeader.js__

import styled from 'styled-components';

const LayoutHeader = styled.div`
  color: #fff;
  background-color: #000;
`;

LayoutHeader.displayName = 'LayoutHeader';
export default LayoutHeader;

michaltaberski on 29 Jun 2017

👍4

@michaltaberski Thank you for sharing your case!
Perhaps it'd be useful for someone!
I guess we can close it.