How to add css classes into react component in storybook?

Member

by deron , in category: Javascript , 2 months ago

How to add css classes into react component in storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by dana , 2 months 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.