Storybook: Storybook (com addon-info) + Componentes estilizados

Criado em 29 jun. 2017  ·  2Comentários  ·  Fonte: storybookjs/storybook

Ei,

Estou usando o livro de histórias (com complemento de informações) no aplicativo Web React. No mesmo aplicativo, estou usando componentes estilizados (https://www.styled-components.com/).

Aqui está um caso simples de como estou fazendo isso:

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

O problema é que a saída das informações do livro de histórias é assim:

download

Posso processar a história de alguma forma para renderizar o conteúdo da história como <LayoutHeader /> vez de <styled.div /> ?

info compatibility with other tools question / support

Comentários muito úteis

Sinto muito, minha pergunta foi muito precipitada.

A solução é:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

Todos 2 comentários

Sinto muito, minha pergunta foi muito precipitada.

A solução é:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

@michaltaberski Obrigado por compartilhar seu caso!
Talvez seja útil para alguém!
Acho que podemos fechar.

Esta página foi útil?
0 / 5 - 0 avaliações