Box

Box компонент используется как обертка компонента для большинства используемых CSS свойств.

The Box component packages all the style functions that are exposed in @material-ui/system. It's created using the experimentalStyled() function of @material-ui/core/styles.

Пример

The palette style function.

The sx prop

All system properties are available via the sx prop. In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it:

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

Переопределение Material-UI компонентов

Box компонент оборачивает ваш компонент. Он создает новый DOM элемент, это <div> по умолчанию, хотя это можно изменить свойством component. Например если вы хотите использовать<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>
  );
}

Это работает превосходно когда изменения могут быть изолированы в новый DOM элемент. Для сущности, вы можете изменить margin(внешний отступ) таким образом.

Тем не менее, иногда вам нужно ориентироваться на базовый элемент DOM. For instance, you want to change the border of the Button. The Button component defines its own styles. Наследование CSS не помогает. Чтобы обойти проблему, у вас есть два варианта:

Использовать React.cloneElement()

Компонент Box имеет свойство clone, которое позволяет использовать метод clone element из 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>
  );
}

Используйте render свойства

The Box children accepts a render props function. You can pull out the 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>
  );
}

⚠️ The CSS specificity relies on the import order. If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last.

API

import Box from '@material-ui/core/Box';

Имя	Тип	По-умолчанию	Описание
children *	union: node \| func		Box render function or node.
clone	bool	false	If `true`, the box will recycle its children DOM element. It's using `React.cloneElement` internally.
component	union: string \| func \| object	'div'	The component used for the root node. Either a string to use a DOM element or a component.
sx	object	{}	Accepts all system properties, as well as any valid CSS properties.