我將我的專案從 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>
);
};
它生成像. 在更新之前，它還會將樣式嵌入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',
],
};
此外，如果我在<style>{styles}</style>沒有jsx道具的情況下包含樣式，它們將包含在制作的故事書中。
只是，文本顯示很奇怪：
什么時候jsx存在，<style />結果標記中完全沒有。
建議？
uj5u.com熱心網友回復：
較新的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 樣式出現。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/358421.html