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. 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 from '@material-ui/core/Box';

export default function BoxSx() {
  return (
    <Box
      sx={{
        width: 300,
        height: 300,
        bgcolor: 'primary.dark',
        ':hover': {
          backgroundColor: 'primary.main',
          opacity: [0.9, 0.8, 0.7],
        },
      }}
    />
  );
}

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/core/Box';
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. Para solucionar el problema, tiene dos opciones:

Utilice React.cloneElement ()

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

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

export default function BoxClone() {
  return (
    <Box sx={{ border: '1px dashed grey' }} clone>
      <Button>Save</Button>
    </Box>
  );
}

Use props de render

Los elementos hijo de Box aceptan una función props de render. Puede extraer el className.

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

export default function BoxClone() {
  return (
    <Box sx={{ border: '1px dashed grey' }}>
      {(props) => <Button {...props}>Save</Button>}
    </Box>
  );
}

⚠️ La especificidad de CSS se basa en el orden de importación. Si desea la garantía de que se anulará el estilo del componente envuelto, debe importar el cuadro al final.

API

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

Nombre	Tipo	Por defecto	Descripción
hijos *	union: node \| func		Función de render de Box o nodo.
clone	bool	false	Si `true`, el Box reciclará su elemento DOM secundario. Está usando `React.cloneElement` internamente.
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.