web-dev-qa-db-ja.com

Material-UI：「classesプロパティに提供されたキーは実装されていません」

WithStyles（）HOCを使用して、MUIコンポーネントのスタイル、テーマ、ブレークポイントをオーバーライドしています。

このようなエラーが発生し続けるため、ここでは理解できないことが明らかにあります。

警告：Material-UI：classesプロパティに提供されるキーtabはItemsに実装されていません。

オーバーライドできるのは、カード、詳細、コンテンツ、カバー、アバター、ロックのいずれかのみです。

サンプルコード： https://codesandbox.io/s/6xwz50kxn

<List />コンポーネントとその子<Items />があります。

私の意図は、demo.jsファイルのスタイルを<List />コンポーネントにのみ適用し、demoChild.jsのスタイルを<Items />コンポーネントに適用することです。

私が間違っていることの説明、そしておそらく解決策を本当に感謝していますか？

注： 他の投稿 が同じエラーで見つかりましたが、私の例とは異なるものがあるようです。

material-ui
22
dauffret

警告は、demo.jsファイルの次の行が原因です。

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

ListのすべてのプロップをItemsに広げています。これらの小道具の1つは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に拡散することはないため、実装されていないクラスに関する警告は表示されません。

64
Jules Dupont

私の場合、異なるファイルで複数のスタイルを再利用したいので、ヘルパー関数を作成しました

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)

Edit wz0vvqmkw5

4
Cong Dan Luong