描述问题

我在 preview.tsx 文件中使用来自 @storybook/addon-themes 的函数 withThemeByClassName 时遇到了 Typescript 错误，但我认为问题可能出在所有的 Theme 函数上。我正在使用 withThemesByClassName 将 light/dark 模式类传递给 TailwindCSS,以便 TailwindCSS 能够接管并处理组件的 light/dark 显示。虽然这种类型错误似乎不影响添加/更改类的功能，但我还是想提出这个问题。
这是类型问题的完整输出：

Type 'DecoratorFunction<Renderer, Args>' is not assignable to type 'DecoratorFunction<ReactRenderer, { [x: string]: any; }>'.
Types of parameters 'c' and 'c' are incompatible.
Type 'StoryContext<ReactRenderer, { [x: string]: any; }>' is not assignable to type 'StoryContext<Renderer, Args>'.
Types of property 'originalStoryFn' are incompatible.
Type 'StoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Renderer, Args>'.
Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Renderer, Args>'.
Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'LegacyStoryFn<Renderer, Args>'.
Types of parameters 'context' and 'context' are incompatible.
                Type 'StoryContext<Renderer, Args>' is not assignable to type 'StoryContext<ReactRenderer, Args>'.
Types of property 'canvasElement' are incompatible.
Type 'unknown' is not assignable to type 'HTMLElement'.ts(2322)
(alias) withThemeByClassName<Renderer>({ themes, defaultTheme, parentSelector, }: ClassNameStrategyConfiguration): DecoratorFunction<Renderer, Args>
import withThemeByClassName

看起来 decorators 需要 DecoratorFunction<ReactRenderer, Args> 而不是 DecoratorFunction<Renderer, Args>
这是一个基于 Next.JS / TailwindCSS 构建的 React 项目。

重现问题

为了通过 NextFont 导入将 Google Fonts 传递给每个故事，我将预览文件转换为 preview.tsx。但我在预览文件中有以下内容。

decorators: [
    withThemeByClassName({
      themes: {
          light: 'light',
          dark: 'dark',
      },
      defaultTheme: 'light',
    }),
    (Story) => (
      <div className={`${montserrat.className}`}>
        <Story />
      </div>
    )
  ]

系统信息

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Chrome: 120.0.6099.56
    Edge: Spartan (44.19041.3570.0), Chromium (119.0.2151.93)
  npmPackages:
    @storybook/addon-a11y: ^7.6.3 => 7.6.3
    @storybook/addon-essentials: ^7.6.3 => 7.6.3
    @storybook/addon-interactions: ^7.6.3 => 7.6.3
    @storybook/addon-links: ^7.6.3 => 7.6.3
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8
    @storybook/addon-themes: ^7.6.3 => 7.6.3
    @storybook/blocks: ^7.6.3 => 7.6.3
    @storybook/jest: ^0.2.3 => 0.2.3
    @storybook/nextjs: ^7.6.3 => 7.6.3
    @storybook/react: ^7.6.3 => 7.6.3
    @storybook/testing-library: ^0.2.2 => 0.2.2
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    storybook: ^7.6.3 => 7.6.3
    storybook-dark-mode: ^3.0.3 => 3.0.3

其他相关信息

• 无响应*