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