MUI 學習

Date
Jun 29, 2022
Property
Medium
Created by
Status
Tags
MUI
react
在MUI中,<Box> 组件是一个非常灵活的工具,用于构建布局和应用样式。它可以接受几乎所有的CSS属性作为其props(属性),使得你可以直接在组件上定义样式,而无需创建单独的CSS文件。下面是一些常用的选项和用法示例:

布局属性

  • display: 定义元素的显示类型,如 blockflexinline 等。
  • flexGrow, flexShrink, flexBasis: 控制flex项目的成长、收缩行为和基础尺寸。
  • flexDirection, flexWrap: 用于flex容器,定义主轴的方向和是否允许换行。
  • justifyContent, alignItems, alignContent: 定义flex项目在主轴、交叉轴和多行上的对齐方式。
  • width, height: 设置元素的宽度和高度。
  • maxWidth, maxHeight, minWidth, minHeight: 设置元素的最大/最小宽度和高度。

边距和填充

  • m, mt, mr, mb, ml, mx, my: 设置margin(外边距)和其各个方向的缩写形式,mxmy 分别是设置水平和垂直方向的margin。
  • p, pt, pr, pb, pl, px, py: 设置padding(内边距)和其各个方向的缩写形式,pxpy 分别是设置水平和垂直方向的padding。

颜色和背景

  • color: 设置文字颜色。
  • bgcolor: 设置背景颜色。

边框

  • border, borderTop, borderRight, borderBottom, borderLeft: 设置边框和其各个方向。
  • borderColor, borderRadius: 设置边框颜色和圆角。

定位

  • position: 设置定位类型,如 relativeabsolutefixed 等。
  • top, right, bottom, left: 控制定位的偏移量。

其他

  • component: 可以指定渲染成任何HTML标签或React组件。
  • sx: 接受一个对象,可以包含上述所有样式选项,还可以包括伪类、媒体查询等高级CSS功能。