Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bouton React

CSS bouton ne s'applique pas

    19 décembre 2024 à 11:05:54

    Bonjour,

    J'ai créer un composant bouton dans mon projet react qui renverra soit vers un lien interne ou externe suivant l'utilité dans mon site.

    import React from 'react';
    import Link from 'next/link';  // Importation du Link de Next.js
    import styles from '../styles/BoutonLien.module.css';
    
    const BoutonLien = ({ lien, texte }) => {
        // Vérifie si le lien est défini et s'il commence par un slash pour déterminer si c'est un lien interne
        if (!lien) {
            console.error('La prop "lien" est requise.');
            return null; // Tu peux afficher un message d'erreur ou un bouton désactivé ici si nécessaire
        }
    
        const isInternalLink = lien.startsWith("/"); // Vérifie si le lien est interne (commence par "/")
    
        return isInternalLink ? (
            <Link href={lien} className={styles.boutonLien}>
                {texte}
            </Link>
        ) : (
            <a href={lien} className={styles.boutonLien} target="_blank" rel="noopener noreferrer"> {/* Pour les liens externes */}
                {texte}
            </a>
        );
    
    };
    
    export default BoutonLien;
    

    J'ai mon fichier BoutonLien.module.css :

    .boutonLien {
        display: inline-block;
        background-color: #FF0000 !important;
        color: #FFF !important;
        padding: 10px 20px;
        text-decoration: none;
        border: 3px solid #D40000;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .boutonLien:hover {
        background-color: #D40000 !important;
        /* Changer légèrement la couleur au survol */
    }


    Et dans ma page home j'intègre le code :

    import styles from '../styles/Home.module.css';
    import BoutonLien from './BoutonLien';
    
    function Home() {
      return (
        <>
            <main className={styles.main}>
            <h1 className={styles.title}>
              <a>Mon titre à renseigner.</a>
            </h1>
            <a>Ma phrase d'accroche à renseigner</a>
    
          </main>
          <BoutonLien lien="/services" texte="Explorer mes services" />
          <BoutonLien lien="https://www.google.fr" texte="Visitez un site externe" />
          <BoutonLien lien="/photographie" texte="Photographie" />
          <BoutonLien lien="https://www.google.fr" texte="Visitez un site externe" />
        </>
    
      );
    }
    
    export default Home;
    

    Résultat :

    Tous les liens fonctionnent. Mes boutons renvoyant vers des liens externes s'affichent correctement.

    Mon problème est que le CSS ne s'applique pas aux liens internes.

    Pourquoi tout fonctionne sauf ce problème ?

    Et comment le résoudre ?


    Cordialement,

    Floriane

    • Partager sur Facebook
    • Partager sur Twitter
      20 décembre 2024 à 12:10:49

      Bonjour,

       return isInternalLink ? (
              <Link href={lien} className={styles.boutonLien}>
                  {texte}
              </Link>
          ) : (
              <a href={lien} className={styles.boutonLien} target="_blank" rel="noopener noreferrer"> {/* Pour les liens externes */}
                  {texte}
              </a>
          );

      Heu, un coup c'est Link et l'autre c'est a Ceci explique cela, ou bien ?

      cdt

      • Partager sur Facebook
      • Partager sur Twitter

      fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui

        20 décembre 2024 à 14:37:27

        Bonjour,

        je pense que la remarque de gcyrillus est tout à fait pertinente. Si tu écris du HTML, tu utilises les attributs du HTML (donc, pas className).

        Ceci dit,

        • as-tu vraiment besoin de forcer l'ouverture d'un nouvel onglet ? Le fait de vouloir garder les gens sur son site a été maintes fois débunké, par exemple sur Nielsen Norman.
        • pourquoi pas ajouter le target et le rel en conditionnel sur ton Link de React ? Qu'est-ce qui t'en empêche ?
        • Partager sur Facebook
        • Partager sur Twitter

        Pas d'aide concernant le code par MP, le forum est là pour ça :)

        Bouton React

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown