Box

O componente Box serve como um componente encapsulador (wrapper) para a auxiliar na maioria das necessidades de uso com CSS.

O component Box compõe todas as funções de estilo que são expostas no @material-ui/system. O component Box compõe todas as funções de estilo que são expostas no @material-ui/system.

A paleta com funções de estilo.

Exemplo

A paleta com funções de estilo.

A propriedade sx

Todas as propriedades do sistema estão disponíveis através da propriedade sx. Além disso, esta propriedade permite que você especifique quaisquer outras regras CSS que você possa precisar. Aqui está um exemplo de como você pode usá-la:

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],
        },
      }}
    />
  );
}

Sobrescrevendo componentes do Material-UI

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

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>
  );
}

Isso funciona muito bem quando as alterações precisam ser isoladas em um novo elemento DOM. Note no exemplo, a forma que você alterou a margem.

No entanto, às vezes, você precisa modificar o elemento DOM subjacente. No entanto, às vezes, você precisa modificar o elemento DOM subjacente. Por exemplo, você quer mudar a borda do botão. A herança por CSS não irá ajudar 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.

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 a função de renderização com propriedades

Os elementos filhos de Box aceitam uma função de renderização com propriedades. Você pode então extrair o 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>
  );
}

⚠️ 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.
sx	object	{}	Aceita todas as propriedades do sistema, bem como quaisquer propriedades CSS válidas.