Odtnhj

I developed an application with this major components React + Material-UI + react-router. Here is my full package.json:

 "name": "trader-ui",
 "version": "0.1.0",
 "private": true,
 "dependencies": 
 "@material-ui/core": "^3.2.0",
 "@material-ui/icons": "^3.0.1",
 "@stomp/stompjs": "^5.0.0",
 "axios": "^0.18.0",
 "classnames": "^2.2.6",
 "prop-types": "^15.6.2",
 "react": "^16.5.2",
 "react-dom": "^16.5.2",
 "react-router-dom": "^4.3.1",
 "react-scripts": "2.0.4"
 ,
 "scripts": 
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 ,
 "eslintConfig": 
 "extends": "react-app"
 ,
 "browserslist": [
 ">0.2%",
 "not dead",
 "not ie <= 11",
 "not op_mini all"
 ],
 "proxy": "http://localhost:8080"

It works just fine on the development server:

$ npm start

Here it is:

However, when I tried to serve a production build:

$ npm run build
$ npm install -g serve
$ serve -s build

It looks:

Could somebody tell me what went wrong with the production build?

Thanks to @giorgim for his suggestion. It was correct. Use Material-UI FAQ to resolve the issue:

https://material-ui.com/getting-started/faq/#why-aren--39-t-my-components-rendering-correctly-in-production-builds-

My code for styles setup was in withRoot.js:

import React from 'react';
import createMuiTheme, MuiThemeProvider from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

const theme = createMuiTheme(
 typography: 
 useNextVariants: true,
 ,
);

function withRoot(Component) 
 function WithRoot(props) 
 return (
 <MuiThemeProvider theme=theme>
 <CssBaseline />
 <Component ...props />
 </MuiThemeProvider>
 );
 

 return WithRoot;


export default withRoot;

I simply wrapped my components with JssProvider:

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

const theme = createMuiTheme(
 typography: 
 useNextVariants: true,
 ,
);

const jss = create(jssPreset());
const generateClassName = createGenerateClassName();

function withRoot(Component) 
 function WithRoot(props) 
 return (
 <JssProvider jss=jss generateClassName=generateClassName>
 <MuiThemeProvider theme=theme>
 <CssBaseline />
 <Component ...props />
 </MuiThemeProvider>
 </JssProvider>
 );
 

 return WithRoot;


export default withRoot;

Of course you should install react-jss beforehand:

$ npm install react-jss