时间戳

首页 > 解决方案 > Material UI 样式在组件中不起作用（警告：`@material-ui/styles` 的多个实例）

javascript - Material 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 App 上的所有主题都将被删除（注意菜单后面背景中的深蓝色条已失去颜色）：

点击后的组件

我正在使用 Material UIwithStyles功能来为我的组件设置主题，我想这是我的主要 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))

标签： javascriptcssreactjsmaterial-ui

解决方案

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

这是有关如何修复警报的链接，但它对我不起作用。npm dedupe什么都不做，我无法更改配置，因为我使用的是 create-react-app。

所以我做了以下事情：

  1. 从package.json中移除 @material-ui/styles 依赖
  2. 冉npm i
  3. 全部import styles from '@material-ui/styles'改为import styles from '@material-ui/core/styles'

推荐阅读