[英]how to do Storybook React Material UI custom styling
Hello I'm new to stroybook and and would liek to use custom colors on my component but i keep on getting errors.您好,我是 stroybook 的新手,并且会在我的组件上使用自定义 colors,但我不断收到错误。
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..这是下面的代码,可以帮我解决这个问题,这样我就可以看到如何在故事书中使用故事书材料 ui 元素。
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 }
It is syntactically incorrect to use the const
keyword and the =
operator inside your default export object.在默认导出 object 中使用
const
关键字和=
运算符在语法上是不正确的。 Try the following code instead:请尝试以下代码:
export default {
classes: useStyles(),
title: "Components/Avatar/Number",
component: Avatar
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.