Pular para o conteúdo

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.

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, a propriedade sx permite você especificar quaisquer outras regras CSS que precisar. Aqui está um exemplo de como usá-la:

import * as React from 'react';
import Box from '@mui/material/Box';

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

Sobrescrevendo componentes do Material UI

O componente Box envolve seu componente. It creates a new DOM element, a <div> that by default can be changed with the component prop. Digamos que você queira usar um <span>: Digamos que você queira usar um <span>:

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/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. Como um exemplo, talvez queira mudar a borda do Botão. Por exemplo, você quer mudar a borda do botão. A herança por CSS não irá ajudar nesse caso. 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>Salvar</Button>
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Salvar</Button>

For non-Material UI components, use the component prop.

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

API

import Box from '@material-ui/core/Box';
Nome Tipo Padrão Descrição
children node
Função de renderização do Box ou nó.
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.

Propriedades do sistema

Como um componente util do CSS, o Box também suporta todas as propriedades de sistem. Você pode usá-los como propriedades diretamente no componente. Por exemplo, uma margem do topo:

<Box mt={2}>