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:
Posso processar a história de alguma forma para renderizar o conteúdo da história como <LayoutHeader />
vez de <styled.div />
?
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.
Comentários muito úteis
Sinto muito, minha pergunta foi muito precipitada.
A solução é:
__LayoutHeader.js__