0

我将我的项目从 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.1to5.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',
  ],
};

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

只是，文本显示得很奇怪：

垂直打印的 CSS

什么时候jsx在那里，<style />从生成的标记中完全丢失。

建议？

4

1 回答 1

0

较新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 样式出现。

于 2021-11-13T13:23:09.700 回答