在 Storybook 中引入的组件没有样式

25 min read

引入的组件没有样式可能是因为在 Storybook 中没有正确地引入和加载组件的样式文件。要在 Storybook 中正确地引入组件的样式，可以按照以下步骤进行操作：

  1. 确保在 Storybook 的配置文件（通常为 .storybook/config.js 或 .storybook/main.js）中，使用了正确的样式加载器。例如，如果使用了 CSS 样式，可以在配置文件中添加以下代码：

    // .storybook/config.js 或 .storybook/main.js
module.exports = {
  ...
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
  ...
};

    这样配置后，Storybook 在加载组件时会自动处理 CSS 样式文件。

  2. 确保在 Storybook 的组件文件中正确地引入和加载组件的样式文件。可以尝试在组件文件中添加以下代码：

    import React from 'react';
import './YourComponent.css'; // 样式文件的相对路径

const YourComponent = () => {
  ...
};

export default YourComponent;

    或者，如果你使用了 CSS 模块化，可以尝试使用以下代码：

    import React from 'react';
import styles from './YourComponent.module.css'; // 样式文件的相对路径

const YourComponent = () => {
  ...
};

export default YourComponent;

    这样做可以确保在 Storybook 中正确加载组件的样式。

  3. 如果上述步骤都没有解决问题，可以尝试重新启动 Storybook，以确保所有更改都生效。

如果还是无法正确加载组件的样式，还需要检查一下样式文件的路径是否正确，以及样式文件是否存在。此外，还要确保组件的样式文件已经正确引入并导出样式内容。