add jss extend with material ui in react

jss-extends-mui.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'

import { Workbox } from 'workbox-window'
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'mobx-react'
import { Router } from 'react-router'
import { syncHistoryWithStore } from 'mobx-react-router'
import { createBrowserHistory } from 'history'
import { MuiThemeProvider, createMuiTheme, StylesProvider, jssPreset } from '@material-ui/core/styles'
import { MuiPickersUtilsProvider } from '@material-ui/pickers'
import DateMomentUtils from '@date-io/moment'
import { create } from "jss";
import jssExtend from "jss-plugin-extend";

import 'react-date-range/dist/styles.css'
import 'react-date-range/dist/theme/default.css'

import muiTheme from './theme'

import { appRoot } from './utils/helper'
import { rootStore } from './stores'
import App from './application'

import './utils/i18n'
import '../node_modules/video-react/dist/video-react.css'

const browserHistory = createBrowserHistory()
const history = syncHistoryWithStore(browserHistory, rootStore.routing)

const theme = createMuiTheme(muiTheme)
const jss = create({
  plugins: [jssExtend(), ...jssPreset().plugins]
});

ReactDOM.render(
  <MuiPickersUtilsProvider utils={DateMomentUtils}>
    <StylesProvider jss={jss}>
      <MuiThemeProvider theme={theme}>
        <Provider {...rootStore}>
          <Router history={history}>
            <App />
          </Router>
        </Provider>
      </MuiThemeProvider>
    </StylesProvider>
  </MuiPickersUtilsProvider>,
  appRoot,
)

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    const wb = new Workbox('/sw.js')
    wb.register()
  })
}