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. Se crea usando la función styled() de @material-ui/core/styles.

Ejemplo

La función de estilo de la paleta.

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:

<Box component="span" m={1}>
  <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. Por ejemplo, desea cambiar el color del texto del botón. El componente Button define su propio color. 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.

<Box color="text.primary" clone>
  <Button />
</Box>

Use props de render

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

<Box color="text.primary">
  {props => <Button {...props} />}
</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.

Cualquier otra propiedad proporcionada será utilizada por las funciones de estilo o se extenderá al elemento raíz.