Box

O componente Box serve como um componente wrapper (invólucro) para a maioria das necessidades de uso com CSS.

O componente Box empacota todas as funções de estilo que estão expostas em @material-ui/system</ code>. Ele é criado usando a função <a href="/styles/api/#styled-style-function-component"><code>styled() do @material-ui/styles.

Exemplo

A paleta de funções de estilo.

Sobrescrevendo componentes do Material-UI

O componente Box envolve seu componente. Ele cria um novo elemento DOM, uma <div> por padrão que pode ser modificada através da propriedade component. Digamos que você queira usar um <span>:

<Box component="span" m={1}>
  <Button />
</Box>

Isso funciona muito bem quando as alterações precisam ser isoladas em um novo elemento DOM. Por exemplo, a você pode alterar as margens da mesma maneira.

No entanto, às vezes, você precisa modificar o elemento DOM subjacente. Por exemplo, você deseja alterar a cor do texto do botão. O componente Button define sua própria cor. A herança por CSS não nos ajuda nesse caso. Para contornar o problema, você tem duas opções:

Usar React.cloneElement()

O componente Box tem uma propriedade clone para permitir o uso do método de clonar elemento do React.

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

Use propriedades de renderização

Os elementos filhos de Box aceitam uma função de renderização de propriedades. Você pode então extrair o className.

<Box color="text.primary">
  {props => <Button {...props} />}
</Box>

⚠️ A especificidade do CSS depende da ordem de importação. Se você quer garantir que o estilo do componente encapsulado seja substituído, você precisa importar o Box por último.

API

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

Nome	Tipo	Padrão	Descrição
children *	union: node \| func		Função de renderização do Box ou nó.
clone	bool	false	Se `true`, o box irá recriar seu elemento DOM filho. Ele irá usar `React.cloneElement` internamente.
component	union: string \| func \| object	'div'	O componente usado como nó raiz. Ou uma string para usar um elemento DOM ou componente.

Quaisquer outras propriedades fornecidas serão usadas por funções de estilos ou propagadas para o elemento raiz.