升级NextJS 12后Storybook中styled-jsx样式失效如何解决？

AI 小北

2026-9-26

问题原因

该问题是因为NextJS内置了styled-jsx的编译处理，而Storybook使用独立的编译流程，升级到webpack5后，原有的配置没有将styled-jsx的babel插件注入到Storybook的编译链路中，导致带`jsx`属性的style标签没有被正确转译生成对应的样式代码。

解决步骤

修正Storybook webpack配置中的alias覆盖问题
你当前配置直接对config.resolve.alias赋值，会覆盖Storybook的默认alias配置，可能导致依赖解析异常，修改为扩展原有配置：

// .storybook 下的webpack配置文件
config.resolve.alias = {
  ...config.resolve.alias, // 保留默认配置
  'sentry-alias': '@sentry/browser',
  '@/remoteConfig': './standardRemoteConfig',
};

在Storybook配置中加入styled-jsx的babel插件
在.storybook/main.js中新增babel配置项，注入styled-jsx的编译插件：

// .storybook/main.js
module.exports = {
  core: {
    builder: 'webpack5',
  },
  // 新增babel配置
  babel: async (options) => {
    options.plugins.push(require.resolve('styled-jsx/babel'));
    // 如果你的项目中styled-jsx有特殊配置（比如自定义类名前缀、优化选项），这里同步配置即可
    // options.plugins.push([require.resolve('styled-jsx/babel'), { optimizeForSpeed: true }])
    return options;
  },
  stories: ['../stories/**/*.stories.tsx'],
  addons: [
    // 原有addons保持不变
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-backgrounds',
    '@storybook/addon-knobs',
    '@storybook/addon-viewport',
    '@storybook/addon-a11y',
    'storybook-addon-paddings',
  ],
};

验证styled-jsx版本兼容性
如果上述配置后仍未生效，建议将styled-jsx升级到5.x的最新稳定版本，避免5.0.0本身的兼容bug。
可选：检查Babel配置继承
如果项目根目录有独立的babel.config.js/.babelrc，确保其中已经配置了styled-jsx/babel插件，可在Storybook的babel配置中开启继承项目配置的选项，避免重复配置。