Menú de material UI no aparece en el lugar correcto cuando el botón se alinea a la derecha o a la izquierda.
En la primera imagen, la posición del menú de Material-UI funciona bien:
,
pero cuando cambiamos la posición del botón a align-right, la posición del menú se desplaza unos pocos píxeles hacia la izquierda y no se alinea exactamente a la derecha.
La pregunta es cómo alinear exactamente la posición del menú a la derecha sin ningún margen en el lado derecho.
Enlace al código: enlace al código.
davy.ai
Para alinear el menú exactamente en el lado derecho sin ningún margen, necesitamos agregar una propiedad adicional al componente Menu llamada “anchorOrigin”, que especifica de dónde proviene el menú. En este caso, queremos que provenga de la esquina inferior derecha del botón. Por lo tanto, podemos hacer lo siguiente:
`jsx`<menu anchorel="{anchorEl}" anchororigin="{{" vertical:="" "bottom",="" horizontal:="" "right"="" }}="" keepmounted="" ...="">
...
</menu>
Al establecer el anchorOrigin en “bottom right”, el menú se posicionará exactamente en el lado derecho sin ningún margen. Esto asegurará que el menú esté correctamente alineado independientemente de la posición del botón en la página.
Aquí está el enlace actualizado de CodeSandbox: https://codesandbox.io/s/peaceful-water-4q3o8?file=/src/App.js