I've created a stand-alone React ponent 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 ponent project works fine (I'm using Storybook to test the ponent), but when I publish and then import the ponent 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 ponent 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 ponent, which I guess is the problem as my main React app is also using this, but this is the remended 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 ponent project was created using create-react-library and so is using Rollup (0.64.1) and babel (6.26.3).

Here is the ponent:

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/myponent'

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))

I've created a stand-alone React ponent 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 ponent project works fine (I'm using Storybook to test the ponent), but when I publish and then import the ponent 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 ponent 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 ponent, which I guess is the problem as my main React app is also using this, but this is the remended 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 ponent project was created using create-react-library and so is using Rollup (0.64.1) and babel (6.26.3).

Here is the ponent:

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/myponent'

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))

• javascript
• css
• reactjs
• material-ui

• 1 Your question needs more clarification, please leave some codes or link a CodeSandBox reproduction of your issue. – AmerllicA Commented Mar 25, 2020 at 14:18
• Hi. I’ve added the code, but it’s pretty basic. – Roo Commented Mar 25, 2020 at 19:33
• Any solution to this? – Miguel Commented May 8, 2020 at 20:00

4 Answers 4

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'

I have an almost identical setup and ran into this exact issue when importing the ponents into a different project. I should mention that we're using webpack to build the app that's consuming the ponent. 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/configuration/resolve/

You should link @material-ui/styles in your story book so first need to npm link @material-ui/styles in your story book and than in your apps

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

npm i @mui/material