D'accord, les gars.
Après avoir essayé de multiples façons différentes de différentes manières différentes, je suis venu ici pour les experts qui connaissent définitivement la réponse de ce problème simple. P>
Alors, le problème que je suis Ayant est que chaque fois que j'essaie d'ajouter des images d'arrière-plan et d'autres propriétés au "corps" des pages de l'application que je crée, il ajoute uniquement le CSS d'une seule page pour toutes les autres pages. P>
Si cette question sonne trop grossière, laissez-moi le faire refroidir à ceci: p>
Comment pouvez-vous ajouter des styles différents pour le corps Pour vous faciliter les choses, vous pouvez consulter le code suivant: p> Voici le fichier de connexion p> Son fichier CSS P> const Login = ({ login, isAuthenticated }) => {
useEffect(() => {
document.querySelector('body').style.backgroundImage = url("../../images/undraw_people_tax5.png");
})
3 Réponses :
Ajouter une instruction suivante dans chaque composant
composant basé sur la classe composant fonctionnel
Merci valibhanv pour la réponse. Je vais essayer cela et vous permettez de savoir si cela fonctionne
Où devriez-vous ajouter cela à? À l'intérieur de la fonction de composant ou en dehors de celui-ci? Juste un novice ici!
Hey ça n'a pas fonctionné. Je ne sais pas pourquoi. Ça n'a pas fonctionné d'une manière ou d'une autre
Bonjour valibhanv, il donne à cette URL n'est pas une erreur définie lorsque j'utilise le composant fonctionnel. Comment résoudriez-vous cela?
Sûr! Où ajouter l'image cependant?
Nous devrions peut-être commencer une discussion dans une pièce?
Comment pouvons-nous déplacer cela en discussion?
Valibhanv, j'ai ajouté l'erreur que je reçois. Vérifiez la modification récente que j'ai faite dans le message d'origine. Merci
Utilisez des noms de classe différents et conservez également vos styles limitées à vos pages en ajoutant des styles de page dans le style global. Ce que je dis est, créez un conteneur pour chaque page. Et dans ce conteneur, gardez tous vos éléments de votre page et styles. J'espère que cela aiderait.
Ensuite, il est difficile de répondre sans voir votre code.
Hey Sha, merci pour la préoccupation de la question. Je vais vous donner le code requis dès que possible
SHA, le code était juste ajouté.
Avez-vous vérifié?
La pratique réactive recommandée pour contrôler le balisage extérieur réagit est réact de casque .
in Chacun de votre composant, incluez un casque code> qui définit des styles corporels (et d'autres attributs) comme celui-ci: p> Remarque: L'approche ne convient que pour la définition de CSS sur le balisage extérieur réagissant comme casque code> Peut être imbriqué à l'intérieur de l'autre via la hiérarchie des composants et fonctionne comme CSS cascade, vous pouvez donc personnaliser corps code> à n'importe quel niveau de profondeur (parmi les composants enfants) comme vous le souhaitez. P> html code>, corps code>. Intérieur à réagir Les composants suivent de meilleures méthodes pour importer des CSS contrôlées comme modules CSS em>, composant stylé em>, etc. p> Mise à jour 1 h3> in Votre cas, placez le casque
code> comme premier enfant de mise à jour 2 h3> Si vous souhaitez utiliser un fichier CSS, au lieu d'avoir tout comme ceci, remplacez votre
importer './login.css) code> avec ceci: p> <Helmet>
<style>
{css}
</style>
</Helmet>
Merci Nguyen! Maintenant que cette page de fonction est juste une variable factice juste?
Donc, si j'utilise cela, serais-je en mesure d'avoir des styles différents pour plusieurs pages?
@Onthewaytosuccess page de fonction est un composant de réact représentant votre page. Oui, vous pouvez avoir des styles différents pour chaque page, voire à l'intérieur de chaque page. J'ai ajouté un commentaire à ce sujet
Je t'ai eu! Je vais aller avec ça et voir comment ça se termine et vous fera savoir
Avez-vous inséré casque comme premier enfant à l'intérieur
Non, je ne l'ai pas dit là-bas ngyuen. Je l'ai placé au-dessus du début de la fonction de composant
Voir mes instructions ajoutées pour répondre
Laissez-nous Continuer cette discussion dans le chat .
Hey Nguyen, votre mise à jour 1 a fonctionné! Merci pour tout!
const css = nécessite ('./ login.css'). Tostring (); Ceci renvoie juste [objet d'objet] et aucune chaîne. : - /
Juste pour être clair, vous demandez comment limiter les styles CSS à un seul composant?
Bonjour Yousaf. Eh bien, oui, je veux limiter les styles CSS à un seul composant. Je l'ai fait avec succès pour d'autres tags, mais pour les images de fond dans l'étiquette du corps., J'ai du mal à comprendre.
Jetez un coup d'œil à Modules CSS
J'ai déjà essayé, n'a pas fonctionné
Ajouter une URL dans des citations telles que
... arrière-planimage = 'URL ("....")' . Ajoutez également[] comme deuxième paramètre suruseeffect ()