web-dev-qa-db-fra.com

Material-UI: "La clé fournie à la propriété classes n'est pas implémentée"

J'utilise le HOC withStyles () pour remplacer certains styles, thèmes et points d'arrêt de composants MUI.

Il y a évidemment quelque chose que je ne comprends pas ici car je continue à avoir des erreurs comme celle-ci:

Avertissement: Material-UI: la clé tab fournie à la propriété classes n'est pas implémenté dans les éléments.

Vous pouvez uniquement remplacer l’un des éléments suivants: carte, détails, contenu, couverture, avatar, verrou

Exemple de code: https://codesandbox.io/s/6xwz50kxn3

J'ai un composant <List /> et son enfant <Items />.

Mon intention est d'appliquer les styles du fichier demo.js uniquement au composant <List /> et les styles du fichier demoChild.js au composant <Items />.

J'apprécierais vraiment une explication de ce que je fais mal, et peut-être une solution?

Remarque: j'ai trouvé autres messages avec la même erreur, mais ils semblent avoir quelque chose de différent de mon exemple.

material-ui
7
dauffret

Les avertissements sont causés par cette ligne dans votre fichier demo.js:

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

Vous étendez tous les accessoires de List dans votre Items. L'un de ces accessoires est classes, contenant toutes les classes CSS que vous définissez dans demo.js. Puisque ceux-ci sont destinés à List, ils incluent les classes CSS implémentées par List mais pas Items. Puisque Items reçoit cet accessoire, il le lit lorsque vous essayez de remplacer des classes qui ne sont pas disponibles et de vous en avertir.

Vous pouvez résoudre ce problème en ne diffusant que les accessoires non utilisés:

// 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} /

Ensuite, vous ne diffuserez pas l'objet classes dans Items, vous ne recevrez donc aucun avertissement concernant les classes non implémentées.

32
Jules Dupont

Dans mon cas, je veux réutiliser plusieurs styles dans différents fichiers, de sorte que j'ai écrit une fonction d'assistance

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

Usage:

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

2
Cong Dan Luong