Tengo un Mapbox instalado en mi aplicación React que muestra ventanas emergentes, pero solo cuando trabajo en localhost. Cuando implemento en Heroku, los estilos se ven rotos. Se ven un poco descoloridos, así que supongo que son los estilos los que están rotos, pero estoy un poco perdido preguntándome qué podría cambiar. También estamos usando bootstrap para diseñar algunos componentes.

Ventana emergente en localhost / Ventana emergente en Heroku

Este es el archivo de estilos en apps.css

 .mapboxgl-popup-content{ background: none !important; padding: 0 !important; } .popup-border { background: linear-gradient(to right, rgb(255, 189, 65), rgb(255, 200, 255)); padding: 4px; border-radius: 10%; opacity: 100%; } .popup-content { margin: auto; color: black; display: flex; flex-direction: column; justify-content: flex-start; border-radius: 10%; background-color: white; min-width: 250px; opacity: 85%; } .popup-title { padding: 0px 20px; align-items: center; justify-content: center; text-align: center; } .popup-description { margin: 0; padding: 0px 20px; align-items: flex-start; justify-content: center; text-align: center; } .popup-owner-attendees { display: flex; flex-direction: row; justify-content: space-evenly; text-align: center; padding: 0px 20px; } .popup-list-title { text-decoration: underline; } .orange-text { color: orange; border-bottom: 1px solid orange; }

En caso de que ayude, este es también el código de la ventana emergente dentro del componente React:

 {selectedEvent ? ( <Popup latitude={selectedEvent.location[1]} longitude={selectedEvent.location[0]} onClose={() => { setSelectedEvent(null); }} > <div> <br /> <h4> {selectedEvent.icon} {selectedEvent.title} </h4> <p>{selectedEvent.description}</p> <p> Host: {selectedEvent.owner ? "@" + selectedEvent.owner.username : "Anonymous"} </p> <p> {/* ATTENDEES IS NOT BEING POPULATED */} Attendees: <ul> {selectedEvent.attendees.map((attendee) => { return <li>{attendee.username}</li>; })} </ul> </p> </div> </Popup> ) : null}