Создайте стиль своего приложения без использования файлов CSS, CSS-in-JS или встроенных стилей
Компонент Box в Material-UI очень полезен для стилизации элементов в приложении React. Вы можете сделать это без использования каких-либо отдельных файлов CSS или с помощью часто используемой встроенной ловушки makeStyles.
Когда я впервые узнал о Material-UI, я познакомился с компонентом Box лишь позже. Теперь, когда я использую его каждый день по работе, я понимаю, насколько он полезен. Я надеюсь, что эта статья может дать вам некоторое представление об этом компоненте и поможет вам стилизовать ваши проекты.
В этой статье мы рассмотрим компонент Box в Material-UI. Сначала мы поговорим о том, как это работает, а затем рассмотрим несколько примеров.
Если вы новичок в Material-UI, ознакомьтесь со статьями ниже, чтобы начать работу.
Компонент коробки
Согласно документации,
«Компонент Box служит в качестве компонента-оболочки для большинства потребностей утилиты CSS».
Вы можете думать об этом как об элементе <div> в HTML. Если мы действительно заглянем под капот, рендеринг компонента Box создаст для нас элемент DOM, который является <div>.
<Box>Box component in Material-UI</Box>
Мы можем изменить этот <div> на другой элемент, если захотим, передав такую опору component.
<Box component="span">This will now be a span</Box>
Помимо изменения элемента DOM, вы можете добавить почти любой стиль CSS в компонент Box.
Вот список различных стилевых функций, которые вы можете использовать. Все они исходят от @material-ui/system. Вы можете прочитать больше об этом здесь".
Давайте взглянем на некоторые свойства, которые мы можем использовать на некоторых примерах. Мы будем использовать созданный нами выше компонент Box.
<Box>Box component in Material-UI</Box>
Граница
Чтобы лучше видеть наш пример, давайте добавим границу к нашему Box. Мы можем сделать это, добавив следующие свойства в компонент Box.
border={1} borderColor="red"
Добавив эти реквизиты, вы увидите, что он создал для нас красную рамку в 1 пиксель.
Размеры
Мы можем добавить ширину и высоту нашему Box, добавив следующие реквизиты.
height={300} width={300}
Это даст ему высоту и ширину по 300 пикселей каждый.
Flexbox
Если мы хотим центрировать наш текст по центру поля, мы можем использовать flexbox, как обычно в CSS. Передайте компоненту следующие свойства.
display="flex" justifyContent="center" alignItems="center"
Теперь наш текст центрирован в середине окна.
Палитра
Мы можем контролировать цвет, используя свойство color, и цвет фона, используя свойства bgcolor, например.
bgcolor="blue" color="white"
Типография
Поскольку компонент Box просто создает для нас элемент <div>, мы можем использовать его также для стилизации текста.
Давайте настроим размер шрифта.
fontSize={24}
Интервал
Также можно добавить поля и интервалы. Material-UI дал нам несколько ярлыков для этого. Вместо того, чтобы вводить поля или отступы, мы можем использовать m и p.
Вот список всех пространственных свойств, которые мы можем использовать с компонентом Box.
- m = маржа
- mt = верхняя маржа
- mr = margin-right
- mb = край-низ
- мл = маржа слева
- mx = поле слева, поле справа
- my = верхняя граница, нижняя граница
- p = заполнение
- pt = верхняя обивка
- пр = отступ справа
- pb = нижняя обивка
- pl = отступ слева
- px = отступ слева, отступ справа
- py = верхняя обивка, нижняя обивка
Заключение
Спасибо за прочтение! Если вы следовали моему примеру, ваш окончательный код будет выглядеть примерно так.
С помощью компонента Box в Material-UI вы можете сделать гораздо больше, но мы не рассмотрели его. Я рекомендую ознакомиться с их документацией, если вы хотите использовать ее в своем приложении.
Использовать компонент Box в Material-UI очень просто. Добавление кучи реквизита иногда может привести к беспорядку, но это упрощает стилизацию нашего элемента с минимальным кодом. Если вам не нравится добавлять слишком много свойств, вы всегда можете выбрать другие методы для стилизации. Это действительно зависит от ваших предпочтений.
Если вы хотите узнать больше о Material-UI, ознакомьтесь с двумя статьями ниже.
