How to add css classes into react component in storybook?

Member

by deron , in category: Javascript , a year ago

How to add css classes into react component in storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by dana , a year ago

@deron 

To add CSS classes to a React component in Storybook, you can simply apply the class directly to the component in the stories you are creating.


Here's an example of adding a CSS class to a React component in a Storybook story:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import React from 'react';
import { MyComponent } from './MyComponent';
import './MyComponent.css';

export default {
  title: 'MyComponent',
  component: MyComponent,
};

export const Default = () => <MyComponent className="my-class" />;


In this example, we are importing the CSS file for the component inside the story file and then applying the my-class CSS class to the MyComponent component by passing it as a prop to the component in the story.


You can also use inline styling or CSS-in-JS libraries like styled-components or emotion to add styles to your components in Storybook. Just make sure to include the necessary styles or libraries in your project and apply them as needed.

Related Threads:

How add react-relay component to the storybook?
How to add class to angular component in storybook?
How to add normalize css to storybook?
How to conditionally apply css classes in ember.js?
How to display vue component inside storybook?
How to use relative angular component in storybook?