使用样式组件样式组件时，故事书中出现错误

Question

我在用故事书。如果样式组件包含在故事书中的样式组件中，则会发生错误。

组件/样式

import { Flex } from "rebass"

export const StyledFlex = styled(Flex)`
  // css...
`

storybook.mdx

import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { StyledFlex } from "component/style"

<Meta title="section/main" />

<Preview>
  <Story name="default">
    <StyledFlex/>
  </Story>
</Preview>

.故事书/main.js

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  stories: [ //root setup is ok
],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-actions",
  ],
  webpackFinal: async (config, { configType }) => {
    config.resolve.plugins = [new TsconfigPathsPlugin()];
    return config;
  },
};

错误信息

Cannot read properties of undefined (reading '0')
TypeError: Cannot read properties of undefined (reading '0')

故事书版本: 6.3.8加载项版本: 6.3.8

使用nextjs 10.0.6

Answer 1

这可能解决您的问题：

// .storybook/preview.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import theme from '../src/ui/theme';

export const decorators = [
    Story => (
        <ThemeProvider theme={darkTheme}>
            <Story />
        </ThemeProvider>
    ),
];