Cuadro

El componente Box sirve como una envoltura para la mayoría de las necesidades CSS.

El componente Box recoge todas las funciones de estilo que están expuesta en @material-ui/system.

La función de estilo de la paleta.

Ejemplo

La función de estilo de la paleta.

The sx prop

All system properties are available via the sx prop. In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it:

import * as React from 'react';
import { Box, ThemeProvider } from '@material-ui/system';

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#00cc44',
            dark: '#00802b',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 300,
          height: 300,
          bgcolor: 'primary.dark',
          '&:hover': {
            backgroundColor: 'primary.main',
            opacity: [0.9, 0.8, 0.7],
          },
        }}
      />
    </ThemeProvider>
  );
}

Anulación de componentes de material-UI

El componente Box envuelve su componente. Crea un nuevo elemento DOM, un <div> por defecto que se puede cambiar con la propiedad componente. Digamos que quiere usar un <span> en lugar:

import * as React from 'react';
import { Box } from '@material-ui/system';
import Button from '@material-ui/core/Button';

export default function BoxComponent() {
  return (
    <Box component="span" sx={{ p: 2, border: '1px dashed grey' }}>
      <Button>Save</Button>
    </Box>
  );
}

Esto funciona muy bien cuando los cambios se pueden aislar a un nuevo elemento DOM. Por ejemplo, puede cambiar el margen de esta manera.

Sin embargo, a veces tienes que apuntar al elemento DOM subyacente. For instance, you want to change the border of the Button. The Button component defines its own styles. La herencia por CSS no ayuda. To workaround the problem, you can use the sx prop directly on the child if it is a Material-UI component.

-<Box sx={{ border: '1px dashed grey' }}>
-  <Button>Save</Button>
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>

El componente Box tiene una propiedad clone para permitir el uso del método de elemento clon de React.

-<Box sx={{ border: '1px dashed grey' }}>
-  <button>Save</button>
-</Box>
+<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>

API

import Box from '@material-ui/core/Box';

Nombre	Tipo	Por defecto	Descripción
hijos *	node		Función de render de Box o nodo.
component	union: string |  func |  object	'div'	El componente utilizado para el nodo raíz. Ya sea un 'string' para usar un elemento DOM o un componente.
sx	object	{}	Accepts all system properties, as well as any valid CSS properties.

System props

As a CSS utility component, the Box also supports all system properties. You can use them as prop directly on the component. For instance, a margin-top:

<Box mt={2}>