如何在makeStyles中使用“主题"和“道具"? [英] How to use 'theme' and 'props' in makeStyles?
问题描述
如何编写makeStyles()
,以便它允许我同时使用主题变量和道具?
How do I write makeStyles()
so that it allows me to use both theme variables and props?
我已经尝试过了:
const useStyles = makeStyles(theme => ({
appbar: props => ({
boxShadow: "none",
background: "transparent",
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
color: theme.palette.getContrastText(props)
}),
}));
并在组件中使用以下命令对其进行调用:
And called it in the component with:
const classes = useStyles(backgroundColor);
backgroundColor
是类型为CSSProperties["backgroundColor"]
但是我得到了错误:
TypeError: Cannot read property 'rules' of undefined
at RuleList.onUpdate (C:\Users\...\node_modules\jss\dist\jss.cjs.js:944:14)
at RuleList.update (C:\Users\...\node_modules\jss\dist\jss.cjs.js:923:12)
at StyleSheet.update (C:\Users\...\node_modules\jss\dist\jss.cjs.js:1178:39)
at attach (C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:141:18)
at C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:262:7
at useSynchronousEffect (C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:207:14)
at C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:254:5
at Layout (C:\Users\...\.next\server\static\development\pages\index.js:1698:17)
at processChild (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:2888:14)
at resolve (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
at ReactDOMServerRenderer.render (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
at ReactDOMServerRenderer.read (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
at renderToString (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
at render (C:\Users\...\node_modules\next-server\dist\server\render.js:86:16)
at renderPage (C:\Users\...\node_modules\next-server\dist\server\render.js:211:20)
at ctx.renderPage (C:\Users\...\.next\server\static\development\pages\_document.js:2404:22)
100 | handleSignUpClick,
101 | backgroundColor
102 | }) => {
> 103 | const classes = useStyles(backgroundColor);
104 | return (
105 | <AppBar className={classes.appbar}>
106 | <Container maxWidth="lg">
我正在使用4.0.0-beta.1版本的材质核心和样式
edit: I'm using version 4.0.0-beta.1 of material core and styles
推荐答案
您需要将对象而不是字符串传递给useStyles
.
You need to pass an object to useStyles
rather than a string.
所以代替:
const classes = useStyles(backgroundColor);
您应该拥有:
const classes = useStyles(props);
或
const classes = useStyles({backgroundColor});
然后您可以使用以下方法获得backgroundColor:
Then you can get at backgroundColor using:
color: theme.palette.getContrastText(props.backgroundColor)
.
这是一个可行的示例: https://codesandbox.io/s/o7xryjnmly
Here's a working example: https://codesandbox.io/s/o7xryjnmly
这篇关于如何在makeStyles中使用“主题"和“道具"?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!