Material UI styles not working in component (warning: several instances of `@material-ui/styles`)

Question

I've created a stand-alone React component that uses the Material UI (4.8.3) library and published this to a private NPM package in order that it can be used in a range of apps.

The stand-alone component project works fine (I'm using Storybook to test the component), but when I publish and then import the component into a new React project (created using create-react-app) I get the warning:

It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.

The component renders on the page as seen below, but without any theming applied:

When it is clicked, any theming on the main React App is removed (note the dark blue bar in the background behind the menu has lost its color):

I'm using the Material UI withStyles functionality to theme my component, which I guess is the problem as my main React app is also using this, but this is the recommended way to apply to style. Does it feel like I need to somehow inherit an instance of the theme from the main host App?

My component project was created using create-react-library and so is using Rollup (0.64.1) and babel (6.26.3).

Here is the component:

import React, {Component} from 'react'
import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
    root: {
        fontSize: '14px',
    }
})

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class MyComponent extends Component {

    render() {
        const { classes } = this.props

        return (
            <div className={classes.root}>Hello world</div>
        )
    }
}

export default withStyles(styles)(MyComponent)

Which is published to an NPM package and then imported into the main app using:

import React, { Component } from 'react'
import { MyComponent } from '@xxx/mycomponent'

const styles = theme => ({
  root: {
    display: "flex",
    flexGrow: 1
  }
});

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Class
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class App extends Component {
  //

  // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  render() {
    //
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <MyComponent />
      </div>
    );
  }
}

export default withRouter(withStyles(styles)(App))

Answer 1

I have an almost identical setup and ran into this exact issue when importing the components into a different project. I should mention that we're using webpack to build the app that's consuming the component. It was suggested to me to try the following in my webpackconfig:

module.exports = {
  ...
  resolve: {
    alias: {
      "@material-ui/styles": require.resolve("@material-ui/styles")
    }
  }
}

This worked great for my case.

For reference: https://webpack.js.org/configuration/resolve/

Answer 2

你应该在你的故事书中链接 @material-ui/styles 所以首先需要在你的故事书中而不是在你的应用程序中npm link @material-ui/styles

Answer 3

I had the same issue, but I do not use StoryBook. This is the first link in Google, so I post my case here, as it might help.

This is the link on how to fix the alert , but it does not work for me. npm dedupe does nothing and I am unable to change config since I am using create-react-app.

So I did following:

1. Removed @material-ui/styles dependency from package.json
2. Ran npm i
3. Changed all import styles from '@material-ui/styles' to import styles from '@material-ui/core/styles'

Answer 4

Please try to install the below package. This helped resolve my issue.

npm i @mui/material