Caja

El componente Caja es un contenedor genérico temático con acceso a las utilidades CSS del Sistema U-Ui.

Introducción

El componente Caja (Box de ahora en adelante) es un contenedor genérico para agrupar otros componentes. Es un bloque de construcción fundamental cuando se trabaja con U-Ui—puedes pensar en él como un <div> con características adicionales incorporadas, como el acceso al tema de tu aplicación y la propiedad sx.

Uso

El componente Box se diferencia de otros contenedores disponibles en U-Ui en que su uso está pensado para ser polivalente y abierto, como un <div>. Los componentes como Container, Stack y Paper, por el contrario, cuentan con accesorios de uso específico que los hacen ideales para determinados casos de uso: Container para la orientación principal del diseño, Stack para diseños unidimensionales y Paper para superficies elevadas.

Conceptos básicos

import Box from '@u_ui/u-ui/Box';

El componente Box se renderiza como un <div> por defecto, pero puedes sustituirlo por cualquier otra etiqueta HTML válida o componente React utilizando la propiedad component. La demo de abajo reemplaza el <div> por un elemento <section>:

Esta caja se representa como un elemento de sección HTML.

import * as React from 'react';
import Box from '@u_ui/u-ui/Box';

export default function BoxBasic() {
  return (
    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
      Esta caja se representa como un elemento de sección HTML.
    </Box>
  );
}

import * as React from 'react';
import Box from '@u_ui/u-ui/Box';

export default function BoxBasic() {
  return (
    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
      Esta caja se representa como un elemento de sección HTML.
    </Box>
  );
}

Press Enter to start editing

Personalización

Con la propiedad sx

Use la propiedad sx para personalizar rápidamente cualquier instancia de Box usando un superconjunto de CSS que tiene acceso a todas las funciones de estilo y propiedades temáticas expuestas en el paquete u-ui system. El demo de abajo muestra como aplicar colores del tema usando esta propiedad:

import * as React from 'react';
import Box from '@u_ui/u-ui/Box';
import { ThemeProvider } from '@u_ui/u-ui/styles';

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#9575cd',
            dark: '#7e57c2',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
  );
}

import * as React from 'react';
import Box from '@u_ui/u-ui/Box';
import { ThemeProvider } from '@u_ui/u-ui/styles';

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#9575cd',
            dark: '#7e57c2',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
  );
}

Press Enter to start editing

Anatomía

El componente Box está compuesto por un único elemento raíz <div>:

<div className="uiBox-root">
    <!-- Contenido de la caja> -->
</div>

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

<Box />