Pular para o conteúdo
Ajude a traduzir esta página

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.

A paleta com funções de estilo.

Exemplo

A paleta com funções de estilo.

A propriedade sx

All system properties are available via the sx prop. In addition, the sx prop allows you to specify any other CSS rules you may need. Aqui está um exemplo de como você pode usá-la:

import * as React from 'react';
import { Box, ThemeProvider } from '@mui/system';

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0059B2',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 300,
          height: 300,
          bgcolor: 'primary.main',
          '&:hover': {
            backgroundColor: 'primary.dark',
            opacity: [0.9, 0.8, 0.7],
          },
        }}
      />
    </ThemeProvider>
  );
}

Sobrescrevendo componentes do Material UI

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

import * as React from 'react';
import { Box } from '@mui/system';
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. As an example, you may want to change the border of the Button. 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>Save</Button>
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>

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

-<Box sx={{ border: '1px dashed grey' }}>
-  <button>Save</button>
-</Box>
+<Box component="button" sx={{ border: '1px dashed grey' }}>Save</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.

System props

As a CSS utility component, the Box also supports all system properties. You can use them as prop directly on the component. For instance, a margin-top:

<Box mt={2}>

Crie seu próprio componente Box componente.

Se você quiser ter um tema padrão diferente para o componente Box , você pode criar sua própria versão dele, usando o utilitário createBox().

import { createBox, createTheme } from '@mui/system';

const defaultTheme = createTheme({
  // your custom theme values
});

const Box = createBox({ defaultTheme });

export default Box;