Границы
Используй настройки border и border-radius для стилизации элементов. Доступно для изображений, кнопок и других элементов.
Border
Используй настройки для добавления или удаления границ. Можно устанавливать как все сразу, так и каждую часть по отдельности.
Добавление
<Box border={1}>…
<Box borderTop={1}>…
<Box borderRight={1}>…
<Box borderBottom={1}>…
<Box borderLeft={1}>…
Удаление
<Box border={0}>…
<Box borderTop={0}>…
<Box borderRight={0}>…
<Box borderBottom={0}>…
<Box borderLeft={0}>…
Цвет границы
<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
Border-radius
<Box borderRadius="50%">…
<Box borderRadius="borderRadius">…
<Box borderRadius={16}>…
API
import { borders } from '@material-ui/system';
Импорт | Свойство | Свойство CSS | В теме |
---|---|---|---|
border |
border |
border |
borders |
borderTop |
borderTop |
border-top |
borders |
borderLeft |
borderLeft |
border-left |
borders |
borderRight |
borderRight |
border-right |
borders |
borderBottom |
borderBottom |
border-bottom |
borders |
borderColor |
borderColor |
border-color |
palette |
borderRadius |
borderRadius |
border-radius |
shape |