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

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)