Storybook: Storybook (mit Addon-Info) + gestaltete Komponenten

Erstellt am 29. Juni 2017 · 2Kommentare · Quelle: storybookjs/storybook

Hallo,

Ich verwende das Storybook (mit Info-Addon) in der Web React App. In derselben App verwende ich gestaltete Komponenten (https://www.styled-components.com/).

Hier ist ein einfacher Fall, wie ich das mache:

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

Das Problem ist, dass die Ausgabe der Storybook-Informationen folgendermaßen aussieht:

download

Kann ich die Story irgendwie so verarbeiten, dass der Story-Inhalt als <LayoutHeader /> statt <styled.div /> ?

info compatibility with other tools question / support

Quelle

michaltaberski

Hilfreichster Kommentar

Es tut mir leid, meine Frage war zu voreilig.

Die Lösung ist:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

michaltaberski am 29. Juni 2017

👍4

Alle 2 Kommentare

Es tut mir leid, meine Frage war zu voreilig.

Die Lösung ist:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

michaltaberski am 29. Juni 2017

👍4

@michaltaberski Vielen Dank, dass Sie Ihren Fall geteilt haben!
Vielleicht wäre es für jemanden nützlich!
Ich denke wir können es schließen.