I have developed a standalone React component that utilizes the Material UI (4.8.3) library and have uploaded it to a private NPM package for use across various applications.
The standalone component project is functioning properly (tested using Storybook), but upon publishing and importing the component into a new React project (created with create-react-app), I am receiving the following warning:
It appears that there are multiple instances of `@material-ui/styles` initialized in this application. This may lead to theme propagation issues, broken class names, specificity issues, and unnecessary increase in application size.
The component is being rendered on the page as shown below, but the theming is not being applied:
https://i.sstatic.net/D2oxr.png
When clicked, the theming from the main React App is stripped off (notice the loss of color in the dark blue bar in the background behind the menu):
https://i.sstatic.net/04z4y.png
I am utilizing the Material UI `withStyles` feature to theme my component, which seems to be causing the issue since the main React app also uses this. However, this is the recommended styling approach. Does it seem like I need to somehow inherit a theme instance from the main host App?
The component project was generated using create-react-library and hence is employing Rollup (0.64.1) and babel (6.26.3).
Below is the code for 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)
After being published to an NPM package, the component is imported into the main app with the following code:
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))