Зачем нужен компонент box-material-ui?

Question

Как ни старайся, я не могу обернуть голову вокруг приведенного здесь описания: https://material-ui.com/components/box/

"Компонент Box служит компонентом-оболочкой для большей части CSS коммунальные нужды. " Для чего нужна утилита CSS

Каков вариант использования этого компонента? Какую проблему это решает? Как вы это используете?

Я считаю документацию по материалам очень ограниченной и трудной для понимания. Я гуглил, но, как правило, только нашел довольно легкие посты в блоге о том, как использовать материал интерфейса. В дополнение к пониманию этого компонента, я был бы очень признателен за любые хорошие ресурсы (что-то вроде лучшей версии их собственной документации, если такая вещь существует).

(Справочная информация, я обычно понимаю React, JS , CSS, HTML и c, с меньшей силой в двух последних).

Спасибо.

Answer 1

A Box это просто коробка. Это элемент, обернутый вокруг его содержимого, который сам по себе не содержит правил стилизации и не имеет никаких эффектов по умолчанию для визуального вывода. Но это место, где можно разместить правила стиля по мере необходимости. Он не предлагает никакой реальной функциональности, он является лишь заполнителем для управления стилями в иерархической структуре разметки.

Я часто думаю о нем как семантически , аналогично пустому элементу JSX:

<>
  Some elements here
</>

Но только с некоторыми возможностями пользовательского интерфейса:

<Box className={classes.someStyling}>
  Some elements here
</Box>

Answer 2

Компонент Box в пользовательском интерфейсе Material содержит много полезных вещей.

Самое важное, что по умолчанию встроен элемент box с функциональными возможностями material-ui / system, что означает, что вы можете применять функциональные возможности системы. к тому, что вам нужно, если вы используете его в качестве оболочки

Как в этом примере:

<Box bgcolor="primary.main" color="primary.contrastText" p={2}>
  primary.main
</Box>

и ядер, вы можете добавить css класс к нему, как вам нравится или нет

другая хорошая полезная вещь, которую он предлагает, может деформироваться в других компонентах и ​​быть очень полезной для применения к ней системных функций

Как в этом примере:

<Typography component="div" variant="body1">
  <Box color="primary.main">primary.main</Box>
</Typography>

Оба приведенных выше примера, я взял их из документации, вы можете найти их по этой ссылке: здесь

, и вы можете найти то, что я имею в виду под материальными функциями системы пользовательского интерфейса. : здесь

Примечание : вы можете добавлять любые функциональные возможности системы пользовательского интерфейса к любому компоненту, например, документам здесь , но я рекомендую вам деформировать вам нужно с коробкой Это делает жизнь намного проще