profile
viewpoint

Ask questions[Chakra-ui/Styling] Chakra styles not showing up in stories

Describe the bug I'm not able to get chakra styling to show up correctly in my stories. The font and styling in general looks off compared to how it shows up in my app.

To Reproduce Steps to reproduce the behavior:

  1. Add storybook to an existing webpack 4 project using the npx command
  2. Add the <ThemeProvider/> to preview.js
  3. Create a story for a component composed of chakra components
  4. Styling doesn't show up correctly despite no errors

Expected behavior Styling should be the same in storybook as the app.

Screenshots Storybook result: Screen Shot 2020-09-24 at 9 47 48 PM

App result (ignore the box shadow, it's showing up correctly on hover): Screen Shot 2020-09-24 at 9 48 04 PM

Code snippets preview.js

import React from 'react';
import { ThemeProvider } from '@chakra-ui/core';
import theme from '../src/theme/theme.ts';

export const decorators = [
  Story => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  )
];

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
};

System: Please paste the results of npx sb@next info here.

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.11.0 - ~/.nvm/versions/node/v12.11.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.11.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: ^6.1.0-alpha.15 => 6.1.0-alpha.15
    @storybook/addon-essentials: ^6.1.0-alpha.15 => 6.1.0-alpha.15
    @storybook/addon-links: ^6.1.0-alpha.15 => 6.1.0-alpha.15
    @storybook/react: ^6.1.0-alpha.15 => 6.1.0-alpha.15

Additional context I tried installing the latest packages and it didn't help. I'm not getting any console or terminal errors.

storybookjs/storybook

Answer questions tmeasday

Thanks for the reproduction @tonyjmartinez. The issue here is missing styles from semantic.min.css

You'll notice in index.html the boilerplate adds that. You just need to do the same in Storybook. The easiest way is using .storybook/preview-head.html:

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
useful!
source:https://uonfu.com/
Github User Rank List