Material-UI Rendering Bugs in production / build

by

I had the exact same issue. Turned out that Webpack would mess around with Material UI’s rules of JSS precedence. You need to manually override the injection order using the index option.

In your makeStyles() or withStyles(), add {index: 1}:

//Hook
const useStyles = makeStyles({
    // your styles here
}, {index: 1})

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)

More Related Contents:

  1. How to build a production version of React without minification?
  2. React + Material-UI – Warning: Prop className did not match
  3. React-router with BrowserRouter / browserHistory doesn’t work on refresh
  4. Error message “error:0308010C:digital envelope routines::unsupported”
  5. Why are cookies not sent to the server via getServerSideProps in Next.js?
  6. ‘npm start’ returns error: “There might be a problem with the project dependency tree”
  7. npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
  8. Next.js: How to get static assets from within getStaticProps
  9. How to send email from my react web application
  10. Module not found: Can’t resolve ‘fs’ in Next.js application
  11. Next.js: document is not defined
  12. How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
  13. Jest gives `Cannot find module` when importing components with absolute paths
  14. Gatsby Failed Build – error “window” is not available during server side rendering
  15. React app error: Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
  16. Get version number from package.json in React Redux (create-react-app)
  17. How to organise file structure of backend and frontend in MERN
  18. How to fix “FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory” error
  19. Access to XMLHttpRequest at ‘…’ from origin ‘localhost:3000’ has been blocked by CORS policy
  20. React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)
  21. One project with multiple package.json files
  22. How to get SCSS variables into react
  23. Unable to deploy React JS application on Azure App service
  24. Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
  25. How to deploy reactapp with heroku-22?
  26. Webpack how to build production code and how to use it
  27. How to access the GET parameters after “?” in Express?
  28. How can I make multiple projects share node_modules directory?
  29. Node package ( Grunt ) installed but not available
  30. npm ERR! code Z_BUF_ERROR when install

Leave a Comment