升级后 JSX 样式不适用于 Storybook

Question

我将我的项目从 NextJS 10 升级到 NextJS 12。除了 Storybook，它现在没有任何样式，一切正常。

我正在使用 styled-jsx 库生成嵌入式 css，将其用作：

const SearchResult = ({ onClick, vehicle }: SearchResultProps): JSX.Element => {
  return (
    <div className="search-result" data-testid="search-result" onClick={onClick}>
      <style jsx>{styles}</style>
      ...
    </div>
  );
};

它生成类似 class="jsx-2615582530 search-result" 的样式。在更新之前，它还会将样式 search-result.jsx-2615582530 嵌入到生成的故事书中。现在，jsx 样式名称在那里，但样式不见了。

我将 styled-jsx 从 3.3.1 升级到 5.0.0，并将 NextJS 升级到 12.0.3。没有改变任何装载机或任何东西。我猜，webpack 可能很容易升级。

我的配置：

const webpack = require('webpack');

module.exports = ({ config }) => {
  // Fill in process.env on the client
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.serializedEnv': {},
    })
  );

  // Sentry requires different packages for front and back end,
  // but in storybook we know it's always client side
  config.resolve.alias = {
    'sentry-alias': '@sentry/browser',
    '@/remoteConfig': './standardRemoteConfig',
  };

  config.module.rules.push({
    test: /\.md$/,
    loader: "raw-loader",
  }),

  config.externals = [...(config.externals || []), 'fs', 'net'];

  config.resolve.extensions.push('.md');

  config.resolve.fallback = {
    "https": false,
    "stream": false,
  };

  return config;
};

和主要

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: ['../stories/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-backgrounds',
    '@storybook/addon-knobs',
    '@storybook/addon-viewport',
    '@storybook/addon-a11y',
    'storybook-addon-paddings',
  ],
};

此外，如果我在没有 jsx 道具的情况下将样式包含为 <style>{styles}</style>，它们将包含在制作的故事书中。

只是，文字显示怪怪的：

当 jsx 存在时，<style /> 从生成的标记中完全丢失。

建议？

Answer 1

较新的 styled-jsx 需要以下内容：

+import { StyleRegistry } from 'styled-jsx';

和

-export const decorators = [withPaddings, withRedux(), (story: Function) => <I18nextProvider i18n={i18n}>{story()}</I18nextProvider>]
+export const decorators = [(Story) => (
+  <StyleRegistry>
+    <Story />
+  </StyleRegistry>
+), withPaddings, withRedux(), (story: Function) => <I18nextProvider i18n={i18n}>{story()}</I18nextProvider>]

这又一次使嵌入式 jsx 样式出现。

升级后 JSX 样式不适用于 Storybook

JSX styles are not working for Storybook after an upgrade

css

reactjs

webpack

next.js

styled-jsx