así que estoy usando componentes donde quiero tener una imagen de fondo en el componente home.jsx y luego, cuando inicio sesión en la página, uso otro componente llamado home_logged.jsx donde no quiero una imagen de fondo pero aún los archivos se mantiene infectado el uno por el otro
este es el css del home.css
body { background-color:#EFEFEF ; background-image:url("../../images/dog.jpeg"); background-size:cover ; background-repeat: no-repeat; background-position: 20px 15px; height: 610px; } .head-div { margin-top:9rem; } h1 { font-size: 50px; padding-left: 80px; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ; color: rgb(141, 82, 15); } p { line-height: 19px; padding-left: 80px; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ; color:#ffca2c; } .btn-warning { margin-top:20px; margin-left: 80px; color:blanchedalmond; font-weight: bold; box-shadow: 5px 3px 10px #363631; padding-left: 25px; padding-right: 25px; border-radius: 44px; }y este es mi home_logged.css
body { background-color:#EDEDED ; background-image: none; } #row_home_logged { margin-top: 7rem; } #doggy { background-image:url("../../images/doggy.png"); background-color: #8ACAD9; background-size: 329px ; background-repeat: no-repeat; } #catty { background-image:url("../../images/catty.png"); background-color:#F8B8B8; background-size: 300px ; background-repeat: no-repeat; } #mixed { background-image:url("../../images/mix.png"); background-color:#F8C808; background-size: 225px ; background-position-x: 20px; background-repeat: no-repeat; } .dogh3 { padding-left: 300px; margin-top: 220px; color:rgb(39, 39, 39) } .link1 { padding-left : 300px; text-decoration:none; color: aliceblue; display: block; padding-bottom: 0px; font-size: 20px; } ._link1 { display: block; padding-left : 300px; color: aliceblue; margin-bottom: 38px; line-height: 0px; } .mixh3 { padding-left: 236px; margin-top: 220px; color:rgb(39, 39, 39) } .mix1 { padding-left: 236px; text-decoration:none; color: aliceblue; display: block; padding-bottom: 0px; font-size: 20px; } ._mix1 { display: block; padding-left: 236px; color: aliceblue; margin-bottom: 38px; line-height: 0px; }así que necesito saber cómo separar el cuerpo entre ellos
Puede mantener el estado de la imagen en su propio archivo JSX y compartirlo con el archivo css usando data-* .
He compartido un pequeño ejemplo sobre cómo pasar la imagen de fondo de la imagen usando javascript.
var list = document.querySelectorAll("div[data-image]"); for (var i = 0; i < list.length; i++) { var url = list[i].getAttribute('data-image'); list[i].style.backgroundImage="url('" + url + "')"; } div[data-image] { width: 100px; height: 100px; /* If needed */ border: 2px solid black; } <div data-image="https://images.unsplash.com/photo-1638913972776-873fc7af3fdf?auto=format&fit=crop&w=100&q=100"></div>intente poner el estilo de fondo en el parámetro de estilo html, está funcionando desde mi lado