J'essaie de définir des valeurs CSS sur certains composants ReactJS.
Y a-t-il un moyen d'accéder aux composants par leur composant? P>
Imaginez ce composant ReactJS: P>
Nav Nav.Link {
color: "red" !important;
}
5 Réponses :
Donnez le composant
ID ouclass et simplement ajouter CSS à ceID / classeExemple:
HOME
.active: {couleur: rouge;}
Idéalement, donnez à votre composant un identifiant ou une classe et définissez le CSS. .. ou: ou, si cela ne fonctionne pas, vous pouvez le faire brute force ... La première approche est recommandée, car elle est évolutive et plus facile à développer avec. Les composants sont effectivement rendus comme une combinaison de et éléments, vous pouvez indiquer si vous Inspectez votre élément. Ainsi, NAV et NAV.LINK CSS Sélectors ne frappera certainement pas ces composants.
Mais je dois le faire à chaque nav.link qui est un travail fastidieux si j'ai plus de liens de navigation de navigation.
@JananathBanuka: Si vous donnez à tous vos éléments que vous souhaitez affecter la même classe, cela devrait réduire le problème. Ensuite, vos nouveaux liens de NAV seraient simplement une copie / pâte avec la même ancienne classe à chaque fois?
Vous devez inspecter l'élément pour trouver un nom de classe dans lequel vous souhaitez appliquer CSS.
Dans votre cas, réacteur-bootstrap code> NAV-LINK Classe: P> .navbar-custom-main .nav-link {
...
}
est nav.link un composant que vous avez écrit?
Si vous avez écrit le composant éditez le code du composant au lieu de le style de l'extérieur avec une classe et des sélecteurs CSS imbriqués.
Si le composant est importé à partir d'une bibliothèque et que vous souhaitez le modifier (sans modifier les fichiers nœud_modules), vous pouvez inspecter les éléments HTML Le composant NAV.LINK est rendu. Il pourrait avoir des classes CSS que vous pouvez modifier avec votre CSS personnalisé.
Autre option que j'utilise avec la bibliothèque de conception d'Ant, qui peut être un peu délicate à style, constitue un composant personnalisé qui enveloppe le composant de la bibliothèque avec un style-composants div, styez-le au besoin et importation de ma coutume composant au lieu de la bibliothèque une.
Vous pouvez également utiliser ctrl f ... Trouver Nav.Link ... Remplacer NAV.LINK ClassName = "orange" ...
Vous pouvez trouver toutes les instances et les remplacer tous facilement. J'espère que cela aide :)
Bonjour, Stephen! Bienvenue à! Où avez-vous obtenu classname = "orange" ? J'ai littéralement fait ça comme exemple de ma réponse.
J'ai lu toutes les réponses avant de répondre. J'allais écrire la même chose que vous, mais je pensais que parfois la meilleure solution est la plus simple. - à votre santé-
Vous avez déjà classname, utilisez-le .. e.g
.navbar-personnalisé-personnalisé {} ou que vous pouvez planter l'élément pour vérifier le nœud DOM.@Harishshama, aucune classe n'est affectée au
NAVBAR et sans doute, cela ne fonctionne pas pour les étiquettes sous elle. Mais si j'ajoute classe à chaque lien, cela fonctionne. Je ne veux pas copier coller la classe dans chaque nav.linkPour les NavLinks, vous pouvez utiliser
.navbar-personnalisé-personnalisé .nav-link {}@HARISHARMA Comment avez-vous supposé / trouver ce
.nav-link nom?@JananthBanuka: il répertorie la classe de
.nav-link à la source de la page de documentation que j'ai liée dans ma réponse, REACT-BOOTTRAP.GITUB.IO/COMPONENTS/NAVS/#NAV-LINK-PROSS Voir:actif Ce n'est pas une solution à long terme. Vous n'avez aucune idée de si cet emballage changera ses cours ou si une personne de votre équipe ajoute une classe similaire nommée.@Jananathabuka Je viens d'inspecter les éléments via. Chrome dev outil. Je sais que vous utilisez
réacteur-bootstrap NAVBAR Composant.Merci pour la documentation. Puis-je obtenir ce nom de classe pour chaque composant bootstrap?
Oui, vous pouvez ... Apprenez simplement à inspecter des éléments. La recherche de la classe sera une paix de gâteau pour vous. :) Ajout de ma réponse ci-dessous .. Vous pouvez l'accepter comme vous répondez ..
Bonjour, JananthBanuka: Oui, vous pouvez utiliser un seul nom de classe pour plusieurs composants. C'est pourquoi nous utilisons des cours.