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

Posted 2023-02-22

【中文标题】Material-UI：“提供给类属性的键未实现”

【英文标题】：Material-UI: "The key provided to the classes property is not implemented"

【发布时间】：2018-08-02 20:06:30

【问题描述】：

我正在使用 withStyles() HOC 来覆盖一些 MUI 组件样式、主题和断点。

这里显然有一些我不明白的地方，因为我不断收到类似这样的错误：

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

您只能覆盖以下选项之一： 卡片,详情,内容,封面,头像,锁

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

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

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

我真的很感激我做错了什么的解释，也许是一个解决方案？

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

【问题讨论】：

我完全可以使用直接样式，没有覆盖，但我似乎无法使用 [theme.breakpoints.up('xs')]: ... 而不会出现这样的错误：Unsupported style property @media (min-width:0px). Did you mean @media (minWidth:0px)?

【参考方案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，因此您不会收到有关未实现类的任何警告。

【讨论】：

现在我读到了你的答案，我因为没有看到它而自责！非常感谢！

非常感谢，它也解决了我的问题。

【参考方案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)

【讨论】：

能否提供一个简单的代码沙箱示例？

@dauffret ，我在上面的代码沙箱中添加了演示