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

user_4200501 0
Viewed 4011

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:

Component before click

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

Component after click

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))
material-ui reactjs css javascript
4 Answers

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'
user_94728570

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/

user_3782930

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

user_16685250

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

npm i @mui/material
user_23122650
Related