Storybook: Storybook (con información adicional) + Componentes con estilo

Creado en 29 jun. 2017 · 2Comentarios · Fuente: storybookjs/storybook

Oye,

Estoy usando el libro de cuentos (con complemento de información) en la aplicación web React. En la misma aplicación, estoy usando componentes con estilo (https://www.styled-components.com/).

Aquí hay un caso simple de cómo estoy haciendo esto:

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

El problema es que la salida de información del libro de cuentos se ve así:

download

¿Puedo de alguna manera procesar la historia para que muestre el contenido de la historia como <LayoutHeader /> lugar de <styled.div /> ?

info compatibility with other tools question / support

Fuente

michaltaberski

Comentario más útil

Lo siento, mi pregunta fue demasiado apresurada.

La solucion es:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

michaltaberski en 29 jun. 2017

👍4

Todos 2 comentarios

Lo siento, mi pregunta fue demasiado apresurada.

La solucion es:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

michaltaberski en 29 jun. 2017

👍4

@michaltaberski ¡ Gracias por compartir su caso!
¡Quizás sea útil para alguien!
Supongo que podemos cerrarlo.