Forum : react css pas prit en compte

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour

J'ai un environnement de dev en react avec le module react bootstrap
j'ai cree dans mon projet un css pour ma barre de navigation, mais le css n'est jamais prit en compte j'ai pourtant ajouter les font Awesome dans le fichier index.html mais rien n'y fait memes les icones awesome ne sont pas prisent en compte


"---<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <link rel="stylesheet" href="./../src/components/Navbar/Navbar.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
    <!--
    ----"

**Ce que je veux**

plus de surlignage sur les lien et les fonts couleurs xwhithe

**Ce que j'obtiens**

Mes liens sont affichés comme si il n'y avait pas de css

".NavbarItems {
    background: linear-gradient(90deg, rgb(110, 94, 254)0%, rgba(73,63,252, 1) 100%);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

.navbar-logo {
    color: #fff;
    justify-self: start;
    margin-left: 20px;
    cursor: pointer;
}
.fa-react {
    margin-left: 0.5rem;
    font-size: 1.6rem;
}

.nav-menu {
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-gap: 10px;
    list-style: none;
    text-align: center;
    width: 70vw;
    justify-content: end;
    margin-right: 2rem;
}
.nav-links {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;

}

.nav-links:hover {
    background-color: #6d76f7;
    border-radius: 4px;
    transition: all 0.2s ease-out;"

Ekim Kael

Je ne sais pas si tu as pu résoudre ton problème mais il serait mieux d'importer le CSS direcctement dans le composants de la NavBar
import "./index.css"

popotte

Salut :)

D'après ce que tu as mis dans la meta description tu as créé ton site en utilisant create-react-app

Dans ce cas ce n'est pas la façon de faire, il ne faut pas toucher au fichier index.html (en principe ce fichier est généré avec dans le corps un commentaire disant qu'il ne faut pas modifier le fichier

Ton style doit être importé dans le js React:

import styles from 'path/Navbar.css'

class Navbar extends Components {
    render() {
        return (
            <div>
                <div className={styles.NavbarItems}></div>
                <div className={styles.navbar-logo}></div>
                // etc...
            </div>
        )
    }
}

// ou en procedural:

const Navbar = () => {
    return (
        <div>
            <div className={styles.NavbarItems}></div>
            <div className={styles.navbar-logo}></div>
            // etc...
        </div>
    )
}

xelek

Bonjour, as-tu réussi à corriger ça finalement ?

react css pas prit en compte

3 réponses