配置故事书文档插件以显示 theme.dark

Posted 2023-03-15

【中文标题】配置故事书文档插件以显示 theme.dark

【英文标题】：configure storybook docs addon to display theme.dark

【发布时间】：2021-02-27 10:12:52

【问题描述】：

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

所以我遵循了故事书文档， 我设置了 ma​​nager.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);

这就是 ma​​in.js 文件的样子：

module.exports = 
  stories: ["../src/**/*.stories.(ts|tsx|js|jsx|mdx)"],
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-actions/register",
    "@storybook/addon-knobs/register",
    "@storybook/addon-notes/register-panel",
    "storybook-addon-designs",
    "@storybook/addon-docs/preset"
  ]
;

我在这个项目中使用打字稿， 所以这里是 tsconfig.json：

  "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"]

我在这里错过了什么？

【参考方案1】：

我在同一个问题上被困了一段时间，但解决方案一直是in the doc：

//.storybook/preview.js
import  themes  from '@storybook/theming';

export const parameters = 
  docs: 
    theme: themes.dark,
  ,
;

是的，您必须在两个不同的文件中指定两次主题