Box

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

The Box component packages all the style functions that are exposed in @mui/system.

Exemplo

A paleta com funções de estilo.

A propriedade `sx`

All system properties are available via the sx prop. 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],
        },
      }}
    />
  );
}

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

Press Enter to start editing

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

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

Press Enter to start editing

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 MUI 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>

System props

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

API

<Box />

Box

Exemplo

A propriedade sx

Sobrescrevendo componentes do Material-UI

System props

API

A propriedade `sx`