Transition Bootstrap en Bootstrap React + SASS
Bonjour ;
Je débute un projet perso en React. Avant cela, j'ai créé un dossier intégration en html/bootstrap et css .. L'intégration me plait parfaitement comme ça et donc, je suis passée en React.
J'ai créé mes composants React et installé Bootstrap React avec la commande "yarn add react-bootstrap bootstrap@5.1.3 "... J'ai remplacé mon intégration de base par des composants Bootstrap React, ça marche bien . Par contre impossible de modifier le style de mes composants Bootstrap avec des classes (ça marche seulement avec des id je comprends pas) ... Ca fait 3h que je suis dessus et que je teste des choses sans succès (j'implore vraiment votre aide :calim2::calim2::calim2:) ....
J'explique un peu mieux ce que j'ai fais :
J'ai un dossier App avec index.js et app.scss.
Dans app.scss j'ai mis du style sur le body (il marche bien) et à la fin : "@import "~bootstrap/scss/bootstrap", et j'ai importé le app.scss dans index.js;"
J'ai un dossier de composant AppHeader dans lequel j'ai index.js et navBar.scss. Dans l'index j'ai importé le css et un composant navBar qui s'affiche nickel.
Par contre IMPOSSIBLE de modifier la couleur des nav-link sans utiliser d'ID .. Si j'utilise des classes ou la div parente (même avec un ID ça ne marche pas)
Je vous mets le code non-fonctionnel ci-dessous :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| import './navBar.scss';
import {
Container,
Navbar,
Nav,
} from 'react-bootstrap';
import logo from 'src/assets/images/logo.png';
const AppHeader = () => (
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home"> <img src={logo} alt="logo" height="80" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link className="nav-link" href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
export default AppHeader; |
et le .scss qui ne s'applique pas du coup (sauf avec un id sur l'élément lui-même, pas son parent)
Code:
1
2
3
4
5
6
|
.nav-link {
color:rgb(121, 15, 1);
font-weight: bold;
text-align: center;
} |
Merci INFINIMENT POUR VOTRE AIDE :)
