web-dev-qa-db-fra.com

Material-Table: le style est prioritaire sur tous les styles et icônes personnalisés et Material UI ne sont pas rendus

J'essaie d'utiliser le composant Material-Table - il est parfait pour une table que je suis en train de construire (ajouter, modifier, supprimer et rechercher des lignes). Je l'ai installé et utilisé comme composant enfant d'une page - tout fonctionne mais ...

STYLISME: tous les styles personnalisés et intégrés de la page sont perdus dans tous les composants de l'interface utilisateur du matériau (c'est-à-dire que les boutons AppBar n'ont pas de remplissage/d'espacement entre les deux, le style de police personnalisé est foiré).

ICÔNES: Les icônes du tableau ne s'affichent pas - elles apparaissent simplement sous forme de texte de coupure grand.

Le style et les icônes des autres pages sans le tableau ne sont pas affectés.

Quelqu'un a une solution? Merci d'avance.

Pour les icônes, j'ai essayé de réinstaller la bibliothèque et d'importer. A également essayé de mettre la méthode html. L'extrait du code de la table des matières est ci-dessous.

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={state.data}
  actions={[
    {
      icon: 'edit',
      tooltip: 'Edit Study',
      onClick: (event, rowData) => alert("Do you want to edit " + rowData.name + "?") 
    },
    rowData => ({
      icon: 'clear',
      tooltip: 'Delete User',
      onClick: (event, rowData) => alert("You want to delete " + rowData.name), 
      disabled: rowData.birthYear < 2000
    })
  ]}
  editable={{
    onRowAdd: newData =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data.Push(newData);
          setState({ ...state, data });
        }, 600);
      }),
    onRowDelete: oldData =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data.splice(data.indexOf(oldData), 1);
          setState({ ...state, data });
        }, 600);
      }),
  }}
/>
cssreactjsiconsmaterial-uimaterial-table
5
ckyc

Dans ma situation, j'utilise @ material-ui/core @ 4.0.0-beta, et material-table utilise 4.2.1.

Vous pouvez obtenir le journal après avoir installé la table des matériaux

info Direct dependencies
├─ @material-ui/[email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @date-io/[email protected]
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

donc je mets à jour le matériel ui vers @ material-ui/core @ 4.2.1 par yarn add @material-ui/[email protected]. et puis ça marche.

0
Renyuan wang