Material-UI：“提供给classes属性的键未实现”

Question

我正在使用withStyles（）HOC来覆盖一些MUI组件样式，主题和断点。

显然有一些我不明白的地方因为我不断遇到这样的错误：

  

警告：Material-UI：提供给classes属性的键tab   没有在Items中实现。

     

您只能覆盖以下某项内容：   卡，细节，内容，封面，化身，锁

示例代码：https://codesandbox.io/s/6xwz50kxn3

我有一个<List />组件及其子<Items />。

我的目的是将demo.js文件中的样式仅应用于<List />组件，将demoChild.js中的样式应用于<Items />组件。

我真的很感激我对错误的解释，也许是一个解决方案？

注意：我发现other posts有相同的错误，但它们似乎与我的示例有所不同。

Answer 1

警告是由demo.js文件中的这一行引起的：

<Items {...this.props} items={items} />

您将所有List道具传播到Items。其中一个道具是classes，包含您在demo.js中定义的所有CSS类。由于它们适用于List，因此它们包含由List而非Items实施的CSS类。由于Items正在接收此道具，因此当您尝试覆盖不可用的类并向其发出警告时，它正在读取它。

您可以通过仅传播未使用的道具来解决此问题：

// Use other to capture only the props you're not using in List
const { classes, headerIsHidden, ...other } = this.props;

// Then spread only those unused props
<Items {...other} items={items} /

然后，您不会将classes对象传播到Items，因此您不会收到有关未实现的类的任何警告。

Answer 2

对于我来说，我想在不同的文件中重用多种样式，以便编写一个辅助函数

import { withStyles } from '@material-ui/core/styles'

// Fixed: material-ui "The key provided to the classes property is not implemented"
const withMultipleStyles = (...params) => {
    return withStyles((theme) => {
        var styles = {}
        for (var len = params.length, key = 0; key < len; key++) {
            styles = Object.assign(styles, params[key](theme));
        }

        return styles
    })
}

export default withMultipleStyles

用法：

import React from 'react'
import compose from 'recompose/compose'
import { connect } from 'react-redux'
import { style1, style2, withMultipleStyles } from '../../styles'

class your_class_name_here extends React.Component {
     // your implement
}

export default compose(
    withMultipleStyles(style1, style2),
    withWidth(),
    connect(mapStateToProps, mapDispatchToProps)
)(your_class_name_here)