Storybook not applying styles from .module.css file

Viewed 132

I'm trying to use Storybook 6.1.20 for a very simple component in my project which uses Next.js, React and Typescript, however Storybook does not apply the styles that I have defined in my .module.css file. The styles are however applied when I start the project itself via npm run dev

This is my component that I want to display in Storybook (Rating.tsx):

import React from "react"
import ratingStyles from '../../../styles/Rating.module.css'

export interface RatingProps {
    value: number 
}

const Rating: React.FC<RatingProps> = ({value}) => {
    return (
        <span className={ratingStyles.text}>
            {value}
        </span>
    )
}

export default Rating

The css file (Rating.module.css):

.text {
    font-weight: 600;
    font-size: 200px;
}

The story file (Rating.stories.tsx)

import React from 'react'
import { Story, Meta } from '@storybook/react';
import Rating, { RatingProps } from '../components/generic/Rating'

export default {
    title: 'Rating',
    component: Rating,
} as Meta

const Template: Story<RatingProps> = (args) => <Rating {...args}/>

export const FirstStory = Template.bind({})
FirstStory.args = {
    value: 10
}
0 Answers
Related