我尝试将 Material UI Dashboard 转换为 TypeScript。 https://github.com/mui-org/material-ui/blob/master/docs/src/pages/page-layout-examples/dashboard/Dashboard.js
目前我面临的问题是在导出仪表板时无法在 withStyles 函数上设置 CSS 样式定义。
const styles = (theme: Theme) => ({
root: {
display: 'flex',
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
.....
});
如果我理解正确,我需要这个主题引用来将样式调整为当前主题。但是在调用样式函数时如何获取当前主题呢?
export default withStyles(styles(/*WHAT TO PUT IN HERE?*/))(Dashboard);
最佳答案
export default withStyles(styles)(Dashboard);
withStyles
将确定是否需要使用主题调用它。withTheme
或 withStyles(stylesObjectOrCreator, { withTheme: true })
仅当您需要访问 theme
时才需要通过 props 在你的组件内部。
API:https://material-ui.com/customization/css-in-js/#withstyles-styles---options----higher-order-component
关于ReactJS Material UI withStyles incl。 TS 中的主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53198972/