withLightThemeHOC.js

import React from 'react';
import PropTypes from 'prop-types';

import { MuiThemeProvider } from '@material-ui/core/styles';

import { lightTheme } from '~/config/theme/index';

function getDisplayName(Component) {
  return Component.displayName || Component.name || 'Component';
}

export default function withLightTheme(Component) {
  function LightThemeComponent(props) {
    const { forwardedRef, ...rest } = props;

    return (
      <MuiThemeProvider theme={lightTheme}>
        <Component {...rest} ref={forwardedRef} />
      </MuiThemeProvider>
    );
  }

  LightThemeComponent.propTypes = {
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  };

  LightThemeComponent.defaultProps = {
    forwardedRef: undefined,
  };

  LightThemeComponent.dislpayName = `LightTheme(${getDisplayName(Component)})`;

  return React.forwardRef((props, ref) => (
    <LightThemeComponent {...props} forwardedRef={ref} />
  ));
}