Me encontré con este fragmento de código:
const breakpoints = { values: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1400, }, }; const drawerOpenStyles = () => ({ background: backgroundValue, transform: "translateX(0)", transition: transitions.create("transform", { easing: transitions.easing.sharp, duration: transitions.duration.shorter, }), [breakpoints.up("xl")]: { // what does [] mean? what does .up() do? boxShadow: transparentSidenav ? "none" : xxl, marginBottom: transparentSidenav ? 0 : "inherit", left: "0", width: sidebarWidth, transform: "translateX(0)", transition: transitions.create(["width", "background-color"], { easing: transitions.easing.sharp, duration: transitions.duration.enteringScreen, }), }, }); En la línea [breakpoints.up("xl")]: {} , tengo problemas para entender:
¿Qué hace [] cuando envuelve una clave de objeto?
¿Qué hace Object.up() en javascript?
Pude imprimir por console.log console.log( cajónOpenStyles: ${JSON.stringify (cajónOpenStyles())} ); y obtuve este resultado:
{ "background":"linear-gradient(195deg, #42424a, #191919)", "transform":"translateX(0)", "transition":"transform 200ms cubic-bezier(0.4, 0, 0.6, 1) 0ms", "@media (min-width:1200px)":{ "boxShadow":" 0rem 1.25rem 1.6875rem 0rem rgba(0, 0, 0, 0.05)", "marginBottom":"inherit", "left":"0", "width":250, "transform":"translateX(0)", "transition":"width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,background-color 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms" } } ¿Cómo exactamente [breakpoints.up("xl")] da "@media (min-width:1200px)" ?
[] le permiten poner una expresión en , que se calculará y usará como el nombre de la propiedad.Object.up() en la API de objeto estándar en JS. Creo que breakpoints.up("xl") está relacionado con la comprobación de puntos de interrupción de la interfaz de usuario del material https://mui.com/customization/breakpoints/