how to do Storybook React Material UI custom styling

user_13775373 0
Viewed 592

Hello I'm new to stroybook and and would liek to use custom colors on my component but i keep on getting errors.

This is the code below, could sb help me to fix this so I can see how to use storybook material ui elements in storybook..

the code:

import "bootstrap/dist/css/bootstrap.min.css";

import React from "react";
import { deepOrange, deepPurple } from '@material-ui/core/colors';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    '& > *': {
      margin: theme.spacing(1),
    },
  },
  orange: {
    color: theme.palette.getContrastText(deepOrange[500]),
    backgroundColor: deepOrange[500],
  },
  purple: {
    color: theme.palette.getContrastText(deepPurple[500]),
    backgroundColor: deepPurple[500],
  },
}));

And this is the error.
export default {
  const classes = useStyles();
  title: "Components/Avatar/Number",
  component: Avatar
}

export const _Avatar = () => (
  <>
  <Avatar>H</Avatar>
      <Avatar className={classes.orange}>N</Avatar>
      <Avatar className={classes.purple}>OP</Avatar>

  </>
);

ERROR in 
src\stories\Avatars\avatar.stories.js
  Parsing error: Unexpected keyword 'const'.
  export default {
   const classes = useStyles();
     ^
     title: "Components/Avatar/Number",
     component: Avatar
  }

storybook material-ui reactjs
1 Answers

It is syntactically incorrect to use the const keyword and the = operator inside your default export object. Try the following code instead:

export default {
  classes: useStyles(),
  title: "Components/Avatar/Number",
  component: Avatar
}
user_110674960
Related