Storybook: Buku Cerita (dengan addon-info) + Komponen Bergaya

Dibuat pada 29 Jun 2017 · 2Komentar · Sumber: storybookjs/storybook

Hei,

Saya menggunakan buku cerita (dengan info addon) di aplikasi web React. Di aplikasi yang sama saya menggunakan komponen bergaya (https://www.styled-components.com/).

Berikut adalah kasus sederhana bagaimana saya melakukan ini:

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

Masalahnya adalah keluaran info buku cerita terlihat seperti ini:

download

Dapatkah saya entah bagaimana memproses cerita sehingga membuat konten cerita menjadi <LayoutHeader /> bukan <styled.div /> ?

info compatibility with other tools question / support

Sumber

michaltaberski

Komentar yang paling membantu

Maaf, pertanyaan saya terlalu terburu-buru.

Solusinya adalah:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

michaltaberski pada 29 Jun 2017

👍4

Semua 2 komentar

Maaf, pertanyaan saya terlalu terburu-buru.

Solusinya adalah:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

michaltaberski pada 29 Jun 2017

👍4

@michaltaberski Terima kasih telah berbagi kasus Anda!
Mungkin akan berguna bagi seseorang!
Saya kira kita bisa menutupnya.