我该如何编写makeStyles()以便它可以同时使用主题变量和道具?
makeStyles()
我已经试过了:
const useStyles = makeStyles(theme => ({ appbar: props => ({ boxShadow: "none", background: "transparent", marginTop: theme.spacing(2), marginBottom: theme.spacing(2), color: theme.palette.getContrastText(props) }), }));
并在组件中使用以下命令调用它:
const classes = useStyles(backgroundColor);
backgroundColor类型在组件上的支撑在哪里CSSProperties["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
您需要将对象传递给useStyles而不是字符串。
useStyles
所以代替:
你应该有:
const classes = useStyles(props);
要么
const classes = useStyles({backgroundColor});
然后,您可以使用以下命令获取backgroundColor:
color: theme.palette.getContrastText(props.backgroundColor)。
color: theme.palette.getContrastText(props.backgroundColor)
这是一个工作示例:https : //codesandbox.io/s/o7xryjnmly