Mui 03 常见组件

Button

Button / IconButton / LoadingButton
Button Group
Tabs

基础属性: color(颜色), disabled(不可点击), href(跳转到链接/锚点), disableElevation(消除实心按钮立体效果)
variant: 文字按钮(text), 填充填充(contained), 空心(outlined)
size: small, medium, large
点击事件 onClick={() => { alert('clicked'); }};
其他: 上传按钮, 带 icon 的按钮 (Button + startIcon/endIcon), icon 按钮 (IconButton), 加载按钮(LoadingButton)

Typography

基础属性: variant(theme), align(对其), color(颜色), display(inline/block), gutterBottom(行下方 Margin), paragraph(段落下方 Margin) npWrap(是否自动换行展示, 或者显示…)
升级属性: variantMapping(映射默认标签为其他标签: h1: "p")

覆盖默认样式的方法(classes + css api, class name, inline css, theme)

const styles = {
  userDefinedClassName: {}, // 自己定义的 class
  cssDefinedClassName: {}, // 在 css 部分定义的 class, 在此覆盖内容
}

// 类定义
class ClassName extends React.Component {
  render() {
    const { classes } = this.props;
  }
}
export default withStyles(styles)(ClassName);

// 函数定义
const useStyle = makeStyles(styles);
export default function renderDemo() {
  const classes = useStyle();
  return (
    <Typography
      cssDefinedClassName // 使用系统默认 class

      className={userDefinedClassName} // 使用自定义 class
      classes={{
        classes.cssDefinedClassName // 使用自定义 class
      }}

      sx={{}} // inline css
    />
  )
}

Theme

breakpoints: 基于屏幕宽度指定展示策略: xs, sm, md, lg, xl
palette: 颜色设定, 还分为 main, light, dark 模式
typography: 字体大小, weight, 样式..

创建 theme

import { createTheme } from "@mui/styles";
const theme = createTheme({
  palette: {
      mode: "light", // dark, 控制主题颜色
  },
  typography: {},
  ..
});

使用 theme

import {ThemeProvider} from "@mui/styles";

<ThemeProvider theme={theme}>
    {..}
</ThemeProvider>

Dark Theme / Light Theme

setState({isDarkTheme: true/false})

定义一个 theme: 切换 mode, mode: isDarkTheme ? "dark" : "light"
定义两个 theme: theme={isDarkTheme ? darkTheme : lightTheme}

Paper

其实就是一个有背景颜色, 阴影效果的盒子.

基础属性: component, elevation(阴影效果, 默认 1), square(是否圆角显示)

Template

免费, 付费模板

React, Redux, DraftJS, ChartJS, PrismJS, React Markdown, React Full Calender

Grid

Grid 将屏幕分成 12 份; 分为 container 和 item 组件, item 必须包含在 container 中; item 同时可加 container 标签实现嵌套, 嵌套的 container 不继承上层的参数.

container 额外属性控制 item 布局

间距: spacing, columnSpacing, rowSpacing
方向(direction): row, row-reverse, column, column-reverse
justifyContent: flex-start, center, flex-end, space-between, space-around, space-evenly
alignItems: flex-start, center, flex-end, stretch, baseline

学习 flexboxfroggy.com

item 额外属性控制文字显示

wrap 显示不下是否显示 ..
xs=”auto” 自动控制宽度

Card

涉及内容

Card: variant
CardHeader: avatar, title, subtitle, action
CardMedia: title, image 图/src 其他资源; 注意 css 一般设置 height:0 表示使用默认宽度.
CardContent:
CardActions:
CardActionArea: 有鼠标悬停, 点击效果

Table

涉及内容

TableContainer: component={Paper}
Table: size=”small/medium”, padding, stickyHeader={true}; 建议覆盖默认 minWidth 参数, 避免变形
TableHead:
TableBody:
TableRow: key
TableCell: align

Tab

AppBar: position
Tabs: value(Tab 默认从 0 开始), onChange, centered(居中), aria-label, aria-labelledby, indicatorColor, orientation, textColor, variant…
Tab: label
自定义内容: TabPanel: value, index(Tab 默认从 0 开始)

其他知识

修改样式的方法

classes: 覆盖文档 css 部分提供的 API
className: 自定义
theme: 继承 default theme 后覆盖部分内容
定义 inline css: style={ {key: value} } 或 sx={ {key: value} }