Mui 01 简介

安装依赖

yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material

index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<meta name="viewport" content="initial-scale=1, width=device-width" />

初始化设置

CssBaseline 将处理不同浏览器默认设置的不同

import CssBaseline from "@mui/material/CssBaseline";

export default function App() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* The rest of your application */}
    </React.Fragment>
  );
}

ScopedCssBaseline 作用是扩展原有网站时, 不影响原网站的浏览器默认配置

import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";

export default function App() {
  return (
    <ScopedCssBaseline>
      {/* The rest of your application */}
      <MyApp />
    </ScopedCssBaseline>
  );
}

使用组件

import * as React from "react";
import ReactDOM from "react-dom";

// 引用组件
import Button from "@mui/material/Button";

function App() {
  // 使用组件
  return <Button variant="contained">Hello World</Button>;
}

ReactDOM.render(<App />, document.querySelector("#app"));

可以查看对应组件的 API 属性参数

展示样式

自定义主题 theme

theme 有 main, light, dark 模式

定义 theme

import { createTheme } from "@mui/material";

import { green, orange } from "@mui/material/colors";

const theme = createTheme({
  palette: {
    primary: {
      main: green[500],
    },
  },
  typography: {
    h3: {
      fontSize: "22px",
    },
  },
  status: {
    danger: {
      main: orange[500],
    },
  },
});
export default theme;

引用 theme

import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme";

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

breakpoints 样式宽窄选择

宽度自适应

值: xs, sm, md, lg, xl

palette 调色板

按主题定义颜色样式

颜色样式分类: common, primary, secondary, info, warning, error, success, grey, text, background, action…

每种样式下又定义不同主题的值: light, main, dark, contrastText

使用方法: color="颜色样式"

typography 版面设计

按主题定义版面样式

重写了文字的 版面样式, 以及 h1~h6, subtile1, subtitle2, body1, body2, button, caption, overline…

使用方法: variant="版面样式"

makeStyle 定义样式

定义样式

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

const useStyles = makeStyles({
  aStyle: {
    fontSize: "22px",
    color: "red",
  },
  // ...
});

使用样式

const classes = useStyles();

render() {
    return <Button className={classes.aStyle}>... </Button>;
}

PS: 这里必须使用 MUI 组件, 才能添加 className, 不能使用 div, a, button 这种原生 dom 组件

总结

1. 安装依赖, 添加初始化代码
2. 引用组件, 使用组件
3. 样式: 定义 theme 样式(palette, typography), 使用 makeStyle