How to use Radix Themes with Storybook?

[jippy89]

I tried importing it to a Storybook. It was really supposed to be a simple line like the following:

import type { Preview } from "@storybook/react";
import '@radix-ui/themes/styles.css';

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

My Debugging Process

1. CSS doesn't load.
   I tried to look for the CSS files in the dev console, it seems like it doesn't come out at all.
   I tried adding an Box, and check its class name which is rt-Box, but it doesn't appear.

2. I have looked at the following issues Cannot import styles.css #46 and Is @radix-ui/themes currently working in plain React (without Next.js)? #59
   Although they are an issue closed, I think the problem remains the same.

[jippy89]

The only workaround that works for me is to copy-paste the styles.css to a folder, then refer to it.
Reference: #59 (comment)

[vladmoroz]

This is most likely not an issue with Radix Themes.

You probably need to configure Storybook so that it knows how to resolve CSS files from node_modules.

[jippy89]

Ah alright, thanks for the reply! I haven't tried any other solutions though, I just snatched solution related to that. But I will update if I ever tried to find another solution.