Así que tengo un componente Banner que obtengo de una biblioteca de terceros. Este componente crea un banner con una imagen svg (como una marca de verificación), algo de texto y un botón de cierre.

Necesito diseñarlo un poco más, así que decidí envolver este componente en mi propio div al que puedo diseñar como quiera.

Aquí está mi código:

 <div style={{ transition: 'opacity 1s ease', opacity: successBannerOpacity, position: 'fixed', top: '0', left: '0', width: '100%', zIndex: '9999', display: 'flex', justifyContent: 'center', }}> <Banner appearance="success" show closeHidden style={{ width: '100vw', display: 'flex', justifyContent: 'center', alignItems: 'center', }}> De e-mail is verstuurd. </Banner> </div>

Quiero diseñar el banner para que esté en la parte superior de mi página web y actúe como un mensaje de "éxito" si el usuario hace clic en un botón y una llamada API es un éxito. Para aparecer/desaparecer estoy usando los valores de opacidad y transición.

También estoy tratando de usar flexbox para que mi div ocupe todo el ancho de la pantalla, pero el contenido del componente Banner esté en el centro.

El Banner tiene un atributo "closeHidden" solo para no mostrar el botón de cierre, porque tengo un setTimeout de 3 segundos que lo desvanecerá nuevamente (usando la transición y la opacidad).

Así es como se ve ahora:

Como puede ver, el contenido en sí está muy bien en el centro (¡también cuando cambio el tamaño de la página!) pero el div/Banner es tan ancho como debe ser, ¡en lugar de ser 100% del ancho de toda mi página!

¿Alguien sabe cómo usar CSS y/o flexbox para obtener el resultado deseado?

EDITAR: si le doy a mi Banner un ancho del 100%, este es el resultado:

Como puede ver, todo el contenido está nuevamente a la izquierda.