如何做 Storybook React Material UI 自定義樣式

Question

您好，我是 stroybook 的新手，並且會在我的組件上使用自定義 colors，但我不斷收到錯誤。

這是下面的代碼，可以幫我解決這個問題，這樣我就可以看到如何在故事書中使用故事書材料 ui 元素。

編碼：

 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

在默認導出 object 中使用const關鍵字和=運算符在語法上是不正確的。 請嘗試以下代碼：

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