How to use the @material-ui/core/styles/withStyles function in @material-ui/core

});

class DisplayValueTypography extends React.PureComponent {
  render() {
    const { children, classes } = this.props;

    // We use a span tag so that the element is inline
    return (
      
        {children}
      
    );
  }
}

export default withStyles(styles)(DisplayValueTypography);

const mapStateToProps = state => ({
  shouldMenuLeftOpened: states.layout.shouldMenuLeftOpened(state),
});

const mapDispatchToProps = {
  onMenuLeftOpened: actions.menuLeftOpened,
  onToggleMenu: actions.toggleMenu,
};

const LayoutConnected = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Layout);

export default withRouter(withStyles(styles.layout)(LayoutConnected));

mobile: PropTypes.bool,
  /** Properties applied to the [Modal](https://material-ui.com/api/modal/) element. */
  ModalProps: PropTypes.object,
  /** Fired when the index changed. Returns current index. */
  onChange: PropTypes.func,
  /** Fired when the gray background of the popup is pressed when it is open. */
  onClose: PropTypes.func,
  /** Fired when the user clicks the getting started button. */
  onStart: PropTypes.func,
  /** Controls whether the AutoRotatingCarousel is opened or not. */
  open: PropTypes.bool,
  /** If `true`, the left and right arrows are hidden in the desktop version. */
  hideArrows: PropTypes.bool
}

export default withStyles(styles)(AutoRotatingCarousel)

);
  }
}

const mapStateToProps = createStructuredSelector({
  errors: makeSelectErrors(),
});

const withConnect = connect(
  mapStateToProps,
  { ...mapDispatchToProps, push },
);

const withStyle = withStyles(styles);

export default compose(
  withStyle,
  withConnect,
)(ChangePassword);

{scanDevicesButton}
            <div>
            {connectionButton}
          
        
      </div>
    );
  }
}

KeyboardSelect.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withSnackbar(withStyles(styles)(KeyboardSelect));

onClick={() => {
                    this.formIsSubmitted(false);
                    this.clearState();
                  }}
                >
                  close
                
              
            )}
          
        
      
    );
  }
}
export default withStyles(styles)(AddUser);

<menuitem>My account</menuitem>
                
              
            )}
          
        
      
    );
  }
}

App.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(appStyle)(App);

<div>
          <div>
            
            
            
          </div>
        </div>
        <footer>
      
    );
  }
}

export default withStyles(landingPageStyle)(LandingPage);
</footer>