Reactjs 配置storybook docs插件以显示theme.dark

我正在尝试将storybook配置为显示黑色主题，但到目前为止，我没有找到任何解决此问题的方法

所以我按照故事书上的文档， 我将设置manager.js文件，如下所示：

// .storybook/manager.js

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

我还将主题打印到了控制台上，因此我看到了它的到来：

值得一提的是，当浏览器重新加载此文件时， 但是如果我更改源代码并保存热重新加载，则无法运行

下面是我在.storybook/preview.js中为文档指定相同主题的方式：

// .storybook/preview.js

import React from "react";
import { appTheme } from "../src/Common/theme";
import { ThemeProvider } from "styled-components";
import { makeDecorator } from "@storybook/addons";
import { addParameters, addDecorator } from "@storybook/react";
import defaultNotes from "./general-docs.md";
import { themes } from "@storybook/theming";

export const parameters = {
  docs: {
    theme: themes.dark
  }
};

addParameters({
  notes: defaultNotes,
  options: {
    showRoots: true
  }
});

const withStyledTheme = storyFn => {
  return <ThemeProvider theme={appTheme}>{storyFn()}</ThemeProvider>;
};

const styledThemed = makeDecorator({
  name: "styled-theme",
  wrapper: withStyledTheme
});

addDecorator(styledThemed);
addParameters(parameters);

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "src"
  },
  "include": ["src"]
}

我在这个项目中使用typescript， 下面是tsconfig.json：

// .storybook/preview.js

import React from "react";
import { appTheme } from "../src/Common/theme";
import { ThemeProvider } from "styled-components";
import { makeDecorator } from "@storybook/addons";
import { addParameters, addDecorator } from "@storybook/react";
import defaultNotes from "./general-docs.md";
import { themes } from "@storybook/theming";

export const parameters = {
  docs: {
    theme: themes.dark
  }
};

addParameters({
  notes: defaultNotes,
  options: {
    showRoots: true
  }
});

const withStyledTheme = storyFn => {
  return <ThemeProvider theme={appTheme}>{storyFn()}</ThemeProvider>;
};

const styledThemed = makeDecorator({
  name: "styled-theme",
  wrapper: withStyledTheme
});

addDecorator(styledThemed);
addParameters(parameters);

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "src"
  },
  "include": ["src"]
}

---

我在这里遗漏了什么？

同一个问题困扰了我一段时间，但解决方案始终是：

/.storybook/preview.js
从“@storybook/theming”导入{themes}；
导出常量参数={
文件：{
主题：主题。黑暗，
},
};

所以，你必须在两个不同的文件中指定两次主题