Borders 边框
使用边框的辅助功能，您能够快速设置元素的边框和边框圆角（border-radius）的样式。 这非常适合图像，按钮或任何其他元素。
边框
Use border utilities to add or remove an element's borders. 选择所有边框或一次选择一个。 选择所有边框或一次选择一个。
添加
<Box sx={{ border: 1 }}>…
<Box sx={{ borderTop: 1 }}>…
<Box sx={{ borderRight: 1 }}>…
<Box sx={{ border: 1 }}>…
<Box border={0}>…
<Box sx={{ borderTop: 1 }}>…
<Box borderRight={0}>…
<Box borderBottom={0}>…
<Box borderLeft={0}>…
<Box sx={{ borderRight: 1 }}>…
<Box sx={{ borderBottom: 1 }}>…
<Box sx={{ borderLeft: 1 }}>…
<Box sx={{ borderTop: 1 }}>…
<Box sx={{ borderRight: 1 }}>…
<Box sx={{ borderBottom: 1 }}>…
<Box sx={{ borderLeft: 1 }}>…
<Box sx={{ borderLeft: 1 }}>…
相减
<Box sx={{ border: 0 }}>…
<Box sx={{ border: 0 }}>…
<Box sx={{ borderTop: 0 }}>…
<Box sx={{ borderRight: 0 }}>…
<Box sx={{ borderBottom: 0 }}>…
<Box sx={{ borderLeft: 0 }}>…
<Box sx={{ borderRight: 0 }}>…
<Box sx={{ borderBottom: 0 }}>…
<Box sx={{ borderLeft: 0 }}>…
边框颜色
<Box sx={{ borderColor: 'primary.main' }}>…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box sx={{ borderColor: 'error.main' }}>…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box sx={{ borderColor: 'text.primary' }}>…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box sx={{ borderColor: 'error.main' }}>…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box sx={{ borderColor: 'text.primary' }}>…
Border-radius
<Box sx={{ borderRadius: '50%' }}>…
<Box sx={{ borderRadius: 1 }}>… <Box sx={{ borderRadius: '50%' }}>…
<Box borderRadius="borderRadius">…
<Box borderRadius={16}>…
<Box borderRadius="borderRadius">…
<Box borderRadius={16}>…
<Box sx={{ borderRadius: 1 }}>… // theme.shape.borderRadius * 1
<Box sx={{ borderRadius: 16 }}>…
<Box sx={{ borderRadius: 1 }}>… <Box sx={{ borderRadius: '50%' }}>…
<Box borderRadius="borderRadius">…
<Box borderRadius={16}>…
<Box borderRadius="borderRadius">…
<Box borderRadius={16}>…
<Box sx={{ borderRadius: 1 }}>… // theme.shape.borderRadius * 1
<Box sx={{ borderRadius: 16 }}>…
API
import { borders } from '@material-ui/system';
| 导入名称 | 属性 | CSS 属性 | Theme key |
|---|---|---|---|
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 |
borderTopColor |
borderTopColor |
border-top-color |
palette |
borderRightColor |
borderRightColor |
border-right-color |
palette |
borderBottomColor |
borderBottomColor |
border-bottom-color |
palette |
borderLeftColor |
borderLeftColor |
border-left-color |
palette |
borderRadius |
borderRadius |
border-radius |
shape |