Question

我正在尝试使用Material UI集合中的导航栏，但是该组件是作为函数编写的，并且正在使用钩子。我试图将组件转换为HOC（类），但是在访问组件中的主题时遇到问题。组件中的主题未定义

const styles = theme => ({
  root: {
    display: "flex"
  },
});

<IconButton onClick={this.handleDrawerClose}>
      {theme.direction === "ltr" ? (
         <ChevronLeftIcon />
      ) : (
         <ChevronRightIcon />
      )}
</IconButton>

Answer 1

尝试一下：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core';
import Paper from './Paper';

const styles = () => ({
  root: {
    display: 'flex'
  }
});

const Bubble = props => {
  const { classes } = props;
  return (
   <IconButton className={classes.root} onClick={this.handleDrawerClose}></IconButton>
  );
};

export default withStyles(styles)(Bubble);

使主题在HOC组件中可用

1 个答案: