how to do Storybook React Material UI custom styling

Question

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 }

Answer 1

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
}