在Storybook的全局装饰器中调用React Hooks

Question

我想为所有故事调用自定义react hook，但是，我不确定在哪里声明。我想要调用的自定义钩子必须在context provider中。

是否有任何方法为所有故事声明上下文提供程序和自定义钩子?

import React from 'react';
import { useCustomHooks } from './custom';
import { ThemeProvider } from 'styled-components';
export const decorators = [
(Story) => (
useCustomHooks() // I wanna call custom hooks here but not working because not in provider
<ThemeProvider theme="default">
<Story />
</ThemeProvider>
),
];

Answer 1

可以，在.storybook/preview.js中:

import { addDecorator } from '@storybook/react';
addDecorator((Story) =>
<MotionLazyContainer>
<ThemeProvider>
<Story />
</ThemeProvider>
</MotionLazyContainer>
);