React Storybook 中的 TaskHarness

Question

I have a really serious problem. I created a Storybook under React. I am not getting the correct values on the Docs site as shown here.

Normally, it should give me something like:

and the values should be changed.

Here is my component file:

// Button/index.tsx
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Button as MButton } from '@material-ui/core';
import clsx from 'clsx';

export interface IButtonProps {}
const useStyles = makeStyles({});

const Button: React.FC<IButtonProps> = (props) => {
   return ();
};

export default Button;

And this one is my story file:

// index.stories.tsx
import { withPerformance } from 'storybook-addon-performance';

export default {
   decorators: [withPerformance],
} as Meta;

Any idea how to solve it?

Answer 1

I solved this problem by removing withPerformance from decorators.

Edit: Here is the solution:

import { addDecorator } from '@storybook/react';
import { withPerformance } from 'storybook-addon-performance';

addDecorator(withPerformance);