Material UI 样式在组件中不起作用（警告：`@material-ui/styles` 的几个实例）答案

【问题标题】：Material UI styles not working in component (warning: several instances of `@material-ui/styles`)Material UI 样式在组件中不起作用（警告：`@material-ui/styles` 的几个实例）
【发布时间】：2020-07-05 21:18:24
【问题描述】：

我创建了一个使用 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 App 上的所有主题都将被移除（注意菜单后面背景中的深蓝色条已失去颜色）：

我正在使用 Material UI withStyles 功能来主题化我的组件，我想这是我的主要 React 应用程序也使用它的问题，但这是应用于样式的推荐方式。是否觉得我需要以某种方式从主宿主应用程序继承主题的实例？

我的组件项目是使用 create-react-library 创建的，因此也是使用 Rollup (0.64.1) 和 babel (6.26.3)。

这是组件：

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)

发布到 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))

【问题讨论】：

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

标签： javascript css reactjs material-ui

【解决方案1】：

我遇到了同样的问题，但我没有使用 StoryBook。这是谷歌的第一个链接，所以我在这里发布我的案例，因为它可能会有所帮助。

This is the link on how to fix the alert，但它对我不起作用。 npm dedupe 什么都不做，我无法更改配置，因为我正在使用 create-react-app。

所以我做了以下操作：

从 package.json 中删除了 @material-ui/styles 依赖项
跑npm i
将所有import styles from '@material-ui/styles' 更改为import styles from '@material-ui/core/styles'

【讨论】：

【解决方案2】：

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

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

这对我的情况非常有用。

供参考：https://webpack.js.org/configuration/resolve/

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

请尝试安装以下软件包。这有助于解决我的问题。

npm i @mui/material

【讨论】：