0

I am trying to integrate RSuite with storybook. I'm using Storybook V7. The problem is the Rsuite theme and classnames are not being applied. I have tried using decorators, add webpack configs, yet I still can't resolve this issue.

This is my preview.ts file

import React from 'react';
import '../src/assets/less/style.less';
import { CustomProvider } from 'rsuite';
import type { Preview, StoryFn } from '@storybook/react';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/
      }
    }
  },
  decorators: [
    (Story: StoryFn) => (
      <CustomProvider theme="light">
        <Story />
      </CustomProvider>
    )
  ]
};

export default preview;

This is my main.ts file:

const path = require('path');

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  staticDirs: ['../public'],
  core: {
    builder: {
      name: '@storybook/builder-webpack5',
      options: {
        fsCache: true,
        lazyCompilation: true
      }
    }
  },
  webpackFinal: async (config) => {
    config?.module?.rules?.push({
      test: /.*\.(?:le|c)ss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        },
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true
            }
          }
        }
      ]
    });

    return config;
  }
};
export default config;

RSuite uses Less pre-processor. The styles are not being applied in to my stories.

Arpit
  • 467
  • 1
  • 8
  • 18

0 Answers0