0
285
Vistas¿Cuándo debo usar estilo en lugar de sx prop en Material-UI?
El estilo y el accesorio sx en los componentes de MUI prácticamente hacen lo mismo. El accesorio sx ofrece algunas sintaxis abreviadas y le permite acceder al objeto del tema. Pero aparte de eso, parecen idénticos. ¿Cuándo se supone que debes usar uno sobre el otro?
1 Respuestas
Responde la pregunta0
Para entender realmente cuál usar, necesitamos entender lo que sucede debajo del capó. Material UI usa emoción (o cualquier motor de estilo que elija manualmente) para diseñar sus componentes. En la superficie, los siguientes dos podrían parecer estar haciendo lo mismo:
<Box sx={{ height:'50px', width:'25px' }}/> <div style={{ height:'50px', width:'25px' }}/> Ambos renderizan divs con la altura y el ancho requeridos, al DOM. Pero para el div, los estilos se aplican como estilos en línea, mientras que Box aplica los estilos en forma de una clase, al elemento div. La definición de la clase en sí se almacena en la etiqueta principal, que puede inspeccionar para ver lo siguiente 
Todo esto está muy bien, siempre y cuando declaremos los estilos solo una vez. Pero las cosas realmente se vuelven locas cuando agregas un estilo dinámico. Tal vez haya una variable de estado que controle la altura de su div.
function CustomComponent(){ const [computedHeight,setComputedHeight]=useState(); useEffect(()=>{ window.addEventListener('resize',()=>setComputedHeight(window.innerWidth/2)) },[]); return ( <Box sx={{ height:computedHeight, width:'25px'}}/> <div style={{ height:computedHeight, width:'25px'}}/> ) Este es un escenario común, donde alguna variable externa (el ancho de la ventana del navegador, por ejemplo) determina alguna propiedad de su componente. Lo que sucede es que cada vez que cambia este estado, MUI crea una nueva clase, la establece como la clase para el cuadro y agrega la definición a la etiqueta <head> de su sitio web, como una nueva etiqueta <style> . Entonces, en muy poco tiempo, la etiqueta principal se llena con cientos de etiquetas de estilo, lo que claramente no es deseable.
Sin embargo, en el caso de su etiqueta div, los estilos se encuentran en línea. Así que no importa si el valor cambia una vez o cien veces, solo hay una definición del estilo, y existe en el elemento mismo. No necesitas preocuparte por ello.
TLDR; Coloque sus estilos dinámicos (los que cambian en función de alguna variable) en el accesorio de estilo y coloque todos los estilos estáticos en el accesorio sx