Mui 02 快速上手开发一个 UX 设计稿

所需组件

@mui/material

  • AppBar 制作 Header
  • Grid 栅格布局
  • Card 卡片, 块状结构(里面可以放: 图片, 按钮, 文字)

@mui/icons-material

各种内置按钮图控件, 在 https://mui.com/components/material-icons/#main-content 查找需要的 icon

@mui/styles

  • makeStyles, withStyles

Grid 栅格排版

Grid 将页面元素宽度平均分成 12 份, 每个 grid 认领占位份数

按 breakpoints 或更宽屏幕 定义如何设置元素宽度: xs, sm. md, lg, xl

1
2
// `xs 极小` 的时候占 12 格, `sm 小` 或更宽的时候占 8 个格
<Grid item xs={12} sm={8}>

Grid 分为 containeritem, 二者可以嵌套组合

1
2
3
4
// Grid
<Grid container sppacing={2}>
<Grid item>...</Grid>
</Grid>

默认 direction=”column” 左中右布局

AppBar 网站头

涉及元素

  • Toolbar
  • Typography

Card 卡片

涉及元素

  • CardHeader
  • CardMedia
  • CardContent
  • CardAction
  • Avatar
  • IconButton 放在 Icon 组件外, 让 组件可点击
  • Button

Jss 的运用

class component

  1. 定义 jss 函数: const useStyle = (theme) => ({ class名: {css内容} })
  2. 注入 jss: export default withStyles(useStyle)(ClassName)
  3. 引用 jss: const {classes} = this.props, className={classes.class名}

function component

  1. 定义 jss 函数: const useStyle = makeStyles((theme) => ({ class名: {css内容} }))
  2. render 方法内引用 jss: const classes = useStyle();, className={classes.class名}

每次编译, 都会根据 jss 生成独特的 class name:

  • 系统 class name 共有: .MuiXXX-xxx, 例如: .MuiButton-root
  • 使用 makeStyles 生成的 class name: .makeStyles-className-randNumber

传 props 参数

传入参数: const classes = useStyles(props);

  1. css 值直接使用函数: color: (props) => (props.light ? "white" : "black")
  2. class name 直接使用函数 className: (props) => ({ return {color: ..., background: ...}; });

使用 theme

区别 props 参数

  • 定义 makeStyles 的时候使用函数, 传入 theme 作为参数
  • 定义 className 对应内容, 元素 style 的时候使用函数, 传入 props
1
2
3
4
5
6
7
8
const useStyles = makeStyles((theme) => ({
className: (props) => {
return {
color: props.cool ? "red" : "green",
[theme.breakpoints.up("sm")]: "cyan",
};
},
}));

表示 颜色 根据参数使用 red/green, 但是宽度大于等于 sm 的时候, 使用 cyan

使用多个 class name 组合

1
yarn add classnames
1
2
3
import classNames from "classnames"

className={classNames(classA, classB)}

其他知识

  • 解构传参 <Item {...params}>

CSS

  • flex: "", justifyContent: "": 浮动的使用
  • color: "": 设置字体颜色
Donate - Support to make this site better.
捐助 - 支持我让我做得更好.