En React Material UI v4 o v5 , hay un problema común con el alejamiento, por ejemplo, si coloca el siguiente estilo en el cuerpo o la etiqueta HTML:

 body { zoom: 80%; /* Zoom out */ }

todos los menús desplegables en la posición de la interfaz de usuario del material se desplazarán desde el lugar correcto que debe estar en él.

1: Este es el lugar correcto sin zoom:

2: Este es el problema después de agregar zoom:

3: Este es el video del problema:

Vídeo del menú desplegable Mui v4

4: Algunas notas sobre este tema:

1- En realidad, podemos solucionar el problema usando el zoom del navegador presionando el comando y la tecla [-], pero estoy buscando una solución basada en código sin decirles a los usuarios que hagan algo.

2- Select2 no enfrenta el mismo problema, puede alejar y mantener el menú en el mismo lugar, tal vez porque la forma de implementar el menú desplegable es diferente.

Enlace de sandbox para Select2

3- El material de Angular no enfrenta el mismo problema, puede seguir el enlace para el sandbox Angular para asegurarse de que no haya problemas con el alejamiento.

5: La pregunta es cómo hacer que Material UI se comporte como Select2/ Angular Material o el menú desplegable normal sin decirles a los usuarios que hagan algo. ¿Cómo determina Material UI la posición del menú desplegable? ¿Cómo podemos anular esta función?