web-dev-qa-db-fra.com

Comment ajouter un lien vers une liste dans Material-UI 1.0?

Les problèmes suivants avec l'animation onClick (le ListItem devient rouge):

<List>
  <a href="https://www.google.com">
    <ListItem button>
       <ListItemText primary="Google" />
     </ListItem>
   </a>
 </List>

Lors de l'ajout du lien dans ListItem, la transition ne fonctionne que si vous cliquez sur ListItemText, ce qui n'est pas ce que je veux. Quelle est la bonne façon d'ajouter un lien?

14
Luis F.

La façon la plus simple d'y parvenir est de faire du ListItem un lien en utilisant le prop component:

<List>
  <ListItem button component="a" href="https://www.google.com">
    <ListItemText primary="Google" />
  </ListItem>
</List>

De cette façon, le ListItem sera une balise d'ancrage reliant à l'endroit souhaité, mais recevra toujours le style approprié afin qu'il n'y ait pas de changements visuels.

Le comportement du component prop est documenté ici . Notez que le href prop sera automatiquement passé à la balise d'ancrage, comme spécifié par la dernière ligne dans la documentation des accessoires:

Toutes les autres propriétés fournies seront propagées à l'élément racine.

27
Jules Dupont

à utiliser avec "react-router-dom"

import { Link } from "react-router-dom";
<ListItem button component={Link} to="/design">

l'exemple est basé dans cette section: docs

57
Julian Botia