Storybook: I can't use semantic react ui in Storybook. How ?

[colevels]

I use react-create-app. I want to use Storybook but it's error. It's can't use semantic ui react on Storybook.

import React from 'react'

import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { linkTo } from '@storybook/addon-links'

// import { Button, Welcome } from '@storybook/react/demo'
import { Button } from 'semantic-ui-react'

// storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />)

storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>)

And I set up semantic via this method

[Hypnosphi]

You need to add this CSS import either in your story or in config.js

[airtonix]

in your preview-head.html

<!-- semantic ui css -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/semantic.min.css"
      integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q="
      crossorigin="anonymous">

simple. Don't bother installing semantic-ui via npm it's a huge pain in the ass, the build tool is archaic and overly convulated.

case in point, it has a post install operation on npm install... seriously?! lol.

[vladanyes]

Just add import 'semantic-ui-css/semantic.min.css'; to your .storybook/config.js