Quiero algo como esto ¡Aquí está el ejemplo!
Intento con el cuadro de interfaz de usuario del material, pero no está representando el cuadro solo representando el texto.
Aquí está el código:
import * as React from 'react'; import Box from '@mui/material/Box'; export default function BreakpointsAsArray() { return ( <div> <Box sx={{ width: [100, 200, 300] }}>This box has a responsive width.</Box> </div> ); }El nombre del cuadro de la interfaz de usuario del material es bastante engañoso y no significa que se creará automáticamente un cuadro rectangular en el HTML representado. Aquí hay una buena explicación del componente de caja. Todavía necesita agregar css/styling para hacerlo de acuerdo a su elección. El cuadro rectangular que ve en su imagen compartida, en realidad se agrega (a través de un código de sitio web) para distinguir mejor entre el texto de la documentación y la salida del fragmento de código. De todos modos, bifurqué el ejemplo de codesandbox y agregué algunos estilos personalizados para mostrar cómo se puede actualizar el estilo. Puede usar el accesorio sx para agregar cualquier estilo que necesite. aquí hay un pequeño ejemplo.
sx={{ width: "90%", padding: "24px 20px", // theme padding border: "1px solid rgba(0, 0, 0, 0.12)", borderRadius: 4 }}