Storybook: Storybook (avec addon-info) + composants stylisés

Créé le 29 juin 2017 · 2Commentaires · Source: storybookjs/storybook

Hey,

J'utilise un livre de contes (avec info addon) sur l'application web React. Dans la même application, j'utilise des composants stylisés (https://www.styled-components.com/).

Voici un cas simple comment je fais cela:

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

Le problème est que la sortie des informations du livre de contes ressemble à ceci:

download

Puis-je en quelque sorte traiter l'histoire pour qu'elle affiche le contenu de l'histoire sous la forme <LayoutHeader /> au lieu de <styled.div /> ?

info compatibility with other tools question / support

Source

michaltaberski

Commentaire le plus utile

Je suis désolé, ma question était trop précipitée.

La solution est:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

michaltaberski le 29 juin 2017

👍4

Tous les 2 commentaires

Je suis désolé, ma question était trop précipitée.

La solution est:

__LayoutHeader.js__

import styled from 'styled-components';

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

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

michaltaberski le 29 juin 2017

👍4

@michaltaberski Merci d'avoir partagé votre cas!
Ce serait peut-être utile pour quelqu'un!
Je suppose que nous pouvons le fermer.