Storybook: Storybook (مع معلومات إضافية) + Styled Components

مهلا،

أنا أستخدم 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 /> ؟