Storybook (with addon-info) + Styled Components

[michaltaberski]

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:

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

[michaltaberski]

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;

[usulpro]

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