ReactJS Material UI withStyles incl. TS中的主题答案

【问题标题】：ReactJS Material UI withStyles incl. theme in TSReactJS Material UI withStyles incl. TS中的主题
【发布时间】：2018-11-07 22:39:05
【问题描述】：

我尝试将 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);

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

export default withStyles(styles)(Dashboard);

withStyles 将确定是否需要使用主题调用它。

withTheme 或 withStyles(stylesObjectOrCreator, { withTheme: true }) 仅在您需要通过 props 访问组件内部的 theme 时才需要。

API：https://material-ui.com/customization/css-in-js/#withstyles-styles---options----higher-order-component

【讨论】：

【解决方案2】：

从material-ui导入withStyle 并按原样使用它：

const style = withStyle((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,
    }),
  },
}));

【讨论】：