CODEWITHSUNDEEP
reactjsmaterial-ui
Andra Avram
Andra Avram

Reputation: 75

Making theme available in HOC component

I am trying to use a navbar from the Material UI collection however the component was written as a function and was using hooks. I'm trying to convert the component to a HOC (class) and I am having issues with accessing the theme in the component. Theme in the component in undefined

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

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

Upvotes: 0

Views: 134

Answers (1)

Diego P
Diego P

Reputation: 1758

Try this: 

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);

Upvotes: 1

Related Questions