Material-ui: Migration to v4.2.0 breaks theme

[cahergil]

This is my index.js file. Now it takes dark blue and pink as primary and secondary colors. I have tried reinstalling all packages again with no luck

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore,  compose, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import { createMuiTheme } from '@material-ui/core/styles';
import  ThemeProvider from '@material-ui/styles/ThemeProvider'



import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
import rootReducer from './store/reducers/index';

const theme = createMuiTheme({
  palette: {
    // primary: { 500: '#2196F3'},
    primary: {

      main: '#2196F3',
      dark: '#074c82'

    },
    secondary: {
      light: '#FABC3D',
      main: '#D4AC16',
      dark: '#976703'
    },
    text: {
      primary: '#000',
      secondary: '#D4AC16'

    }
  },
  typography: {
    htmlFontSize: 10,
    useNextVariants: true
  }
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);


ReactDOM.render(
  // <BrowserRouter basename="/playas-react" > apply this in production(gh-pages)
  <Provider store={store}>
    <BrowserRouter>
      <ThemeProvider theme={theme} >
        <App />
      </ThemeProvider>
    </BrowserRouter>
  </Provider>

  , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Dependencies:

"dependencies": {
    "@amcharts/amcharts3-react": "^3.1.0",
    "@babel/types": "^7.5.0",
    "@material-ui/core": "^4.2.0",
    "@material-ui/icons": "^4.2.0",
    "@material-ui/styles": "^4.2.0",
    "axios": "^0.19.0",
    "core-js": "^3.1.4",
    "lodash": "^4.17.11",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "query-string": "^6.8.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.1",
    "react-dom": "^16.8.6",
    "react-google-maps": "^9.4.5",
    "react-image-fallback": "^8.0.0",
    "react-image-gallery": "^0.8.17",
    "react-infinite-scroller": "^1.2.4",
    "react-redux": "^7.0.3",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1",
    "recompose": "^0.30.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "scroll-into-view": "^1.9.7"
  },

[eps1lon]

Are there any warnings in your console?

What does yarn why @material-ui/styles (if yarn.lock) or npm ls @material-ui/styles (if package-lock.json) print?

[cahergil]

Carlos@Carlos-PC MINGW64 ~/Desktop/FrontEnd/udacity/playas-react (master)
$ npm ls @material-ui/styles
[email protected] C:\Users\Carlos\Desktop\FrontEnd\udacity\playas-react
+-- @material-ui/[email protected]

| `-- @material-ui/[email protected]

`-- @material-ui/[email protected]

[eps1lon]

Possible duplicate of #16500

Could you check if you have node_modules/@material-ui/styles as well as node_modules/@material-ui/core/node_modules/@material-ui/styles? Only a single version should exists. If multiple versions exist in your node_modules/ make sure npm dedupes those (e.g. remove the lockfile and install again https://github.com/mui-org/material-ui/issues/16500#issuecomment-508920083)

[cahergil]

Thanks @eps1lon !
Your assumptions were right, your solution works 100%.

[eps1lon]

Great to hear! I guess we can close.