material-ui/如何使用 'withStyles()' 设置 HOC 样式？

Question

我的 HOC:

const withPaper = Component => props => (
  <Paper>
    <Component {...props} />
  </Paper>
);

export default withPaper;

我想使用 withStyles() 设置“Paper”组件的样式:

const styles = theme => ({
  root: {
    backgroundColor: 'green'
  }
});

const withPaper = ?? => ?? => (
  <Paper className={classes.root}>
    <Component {...props} />
  </Paper>
);

export default withStyles(styles)(withPaper);

在这种情况下，我如何注入(inject)类 Prop ？
我的简单想法 Component => ({classes, ...props}) =>记录错误。

TypeError: Cannot call a class as a function

Answer 1

回答我自己的问题。

我忽略了 HOC 的返回。它返回“组件”而不是“ react 元素”。
我不确定，但我认为这就是我无法从 HOC 之外注入(inject)类(class)的原因。

我的解决方案效果很好 - 在 HOC 内部进行样式设置:

const withPaper = Component => {
  const WithPaper = ({ classes, ...props }) => (
    <Paper className={classes.root}>
      <Component {...props} />
    </Paper>
  );

  const styles = theme => ({
    root: {
      backgroundColor: 'green'
    }
  });

  return withStyles(styles)(WithPaper);
};

export default withPaper;

仅供引用，TypeScript 用户可以引用 Rahel 的答案。