reactjs - ReactJS Material UI withStyles incl。TS中的主题
问题描述
我尝试将 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
通过道具访问组件内部时才需要。
推荐阅读
- javascript - 如何使用javascript获取动态表中的单元格值
- sql-server - SQL 查询性能调优 - 附加执行计划
- r - 使用 R 检测销售数据中的模式
- angular - Angular 6 更新规范 [object ErrorEvent] 抛出
- ruby-on-rails - 单击查看此应用程序时显示完整的应用程序
- ruby - Ruby - 更新哈希键以去除空格
- java - Mock Objects Created Inside method Under test 以验证传递的参数
- mysql - 在 MySQL 的 2 列上使用派生表和 GROUP BY
- reactjs - 当有单个单选按钮时如何触发 redux 操作
- docker - Docker 容器未从主机继承 dns 设置