Javascript 材质UI样式在组件中不起作用（警告：“@Material UI/styles”的多个实例）

我创建了一个使用Material UI（4.8.3）库的独立React组件，并将其发布到一个私有NPM包中，以便在一系列应用程序中使用

独立组件项目工作正常（我正在使用Storybook测试组件），但当我发布组件并将其导入新的React项目（使用create React app创建）时，我收到警告：

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.

组件在页面上呈现，如下所示，但未应用任何主题：

单击后，主React应用程序上的所有主题都将被删除（请注意，菜单后面背景中的深蓝色条已失去颜色）：

我正在使用Material UI

和Styles

功能对我的组件进行主题化，我想这是问题所在，因为我的主要React应用程序也在使用它，但这是应用于style的推荐方法。我是否觉得我需要以某种方式从主主机应用程序继承一个主题实例

我的组件项目是使用CREATEREACT库创建的，使用Rollup（0.64.1）和babel（6.26.3）也是如此

以下是组件：

import React，{Component}来自“React”
从“@material ui/core/styles”导入{withStyles}”
常量样式=主题=>({
根目录：{
fontSize:'14px'，
}
})
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
类MyComponent扩展组件{
render（）{
const{classes}=this.props
返回(
你好，世界
)
}
}
导出默认样式（样式）（MyComponent）

发布到NPM包，然后使用以下方法导入主应用程序：

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

import React，{Component}来自“React”
从“@xxx/MyComponent”导入{MyComponent}
常量样式=主题=>({
根目录：{
显示：“flex”，
flexGrow:1
}
});
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//阶级
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
类应用程序扩展组件{
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
render（）{
//
const{classes}=this.props；
返回(
);
}
}
使用路由器导出默认值（使用样式（样式）（应用））

您应该在故事书中链接@material ui/样式

---

因此，首先需要在您的故事书和应用程序中

npm link@material ui/styles

，我也有同样的问题，但我不使用故事书。这是谷歌的第一个链接，所以我在这里发布我的案例，因为它可能会有所帮助

，但它对我不起作用<代码>npm重复数据消除不执行任何操作，并且我无法更改配置，因为我正在使用create react应用程序

所以我做了以下几点：

已从package.json中删除@material ui/styles依赖项

运行

npm i

将所有

导入样式从“@material ui/styles”更改为
导入样式从“@material ui/core/styles”

---

我有一个几乎相同的设置，在将组件导入不同的项目时遇到了这个问题。我应该提到的是，我们正在使用webpack构建使用该组件的应用程序。建议我在我的webpackconfig中尝试以下操作：

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

这对我的案子很有效

---

参考：

您的问题需要进一步澄清，请留下一些代码或链接代码沙盒复制您的问题。您好。我已经添加了代码，但它非常基本。有什么解决方案吗？