withRoot.js

import CssBaseline from '@material-ui/core/CssBaseline';
import {createGenerateClassName, createMuiTheme, jssPreset, MuiThemeProvider} from '@material-ui/core/styles';
import {create} from 'jss';
import React from 'react';
import JssProvider from 'react-jss/lib/JssProvider';

// A theme with custom primary and secondary color.
// It's optional.
const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#ebe4dd',
      main: '#59421d',
    },
    secondary: {main: '#ac7d44'},
  },
  overrides: {
    MuiOutlinedInput: {
      input: {
        paddingTop: 10.5,
        paddingBottom: 10.5,
      }
    }
  }
});

const styleNode = document.createComment("jss-insertion-point");
document.head.insertBefore(styleNode, document.head.firstChild);

const generateClassName = createGenerateClassName();
const jss = create({
  ...jssPreset(),
  insertionPoint: styleNode,
});

function withRoot(Component) {
  function WithRoot(props) {
    // MuiThemeProvider makes the theme available down the React tree
    // thanks to React context.
    return (
        <JssProvider jss={jss} generateClassName={generateClassName}>
          <MuiThemeProvider theme={theme}>
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline/>
            <Component {...props} />
          </MuiThemeProvider>
        </JssProvider>
    );
  }

  return WithRoot;
}

export default withRoot;