Storybook: ストーリーブック（アドオン情報付き）+スタイル付きコンポーネント

ねえ、

Web Reactアプリでストーリーブック（情報アドオン付き）を使用しています。 同じアプリで、スタイル付きコンポーネント（https://www.styled-components.com/）を使用しています。

これが私がこれをどのように行っているかという単純なケースです：

__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>
));

問題は、ストーリーブックの情報出力が次のようになることです。

それは通りのストーリーのコンテンツをレンダリングするので、私は何とか話を処理することができます<LayoutHeader />の代わりに<styled.div /> ？