Estoy tratando de crear un modal en React, pero me encuentro con algunos problemas.

Supongamos que tengo la siguiente estructura:

Reaccionar estructura

 <ComponentUsingModal> <Left> <ButtonToActivateModal> ... </ButtonToActivateModal> <ModalComponent> ... </ModalComponent> </Left> <Right> ... </Right> </ComponentUsingModal>

Código para modal

 <div className='modal'> <div className='modal-content'> </div> </div>

CSS

 .modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; z-index: 2; } .modal-content { color: white; width: 313px; height: 332px; background-color: red; }

Nota: Para el botón, estoy usando el enlace useState y useEffect para actualizar un valor verdadero dentro del componente modal para representarlo en la pantalla.

Aquí, el modal está centrado. Ahora suponga que el contenido del centro se divide en dos partes, de modo que hay un lado izquierdo y otro derecho.

El objetivo es tener el modal colocado en el lado izquierdo.

Usando JavaScript, pude reposicionar el modal al lado izquierdo cuando el modal se muestra en la pantalla. Sin embargo, dado que el modal se colocó inicialmente en el centro, puede ver visualmente que el modal se mueve desde el centro hacia el lado izquierdo (aunque bastante rápido). No importa dónde se posicione inicialmente el modal, habrá ese movimiento irregular. Pensé en hacer que todos los colores fueran transparentes y pasar el estilo dentro del componente React, pero eso parece demasiado complicado para mi gusto.

¿Qué otras alternativas hay?

Nota: quiero que el modal se fije en la misma posición independientemente del ancho y alto de la pantalla.