MUI基础

变量

常用：variant:h1-5, body1-2和gutterBottom

Link

<Link href="#" className={classes.link} variant="body2">
  Sport
</Link>

Diver

**Diver: **分割线

<Link href="#" className={classes.link} variant="body2">
  Music
</Link>
<Divider flexItem style={{marginBottom:15}}/>
<Link href="#" className={classes.link} variant="body2">
  Movies
</Link>

Button

<Button 
  variant="contained"
  color="primary"
  size="large"
  startIcon={<Person/>}
  style={{backgroundColor:"pink", color:"black"}}//自定css
  >
  Material UI
</Button>

<Button size='small' color='primary'>Share</Button>

Styles + Palette

**Styles： **对于多CSS方便修改查看, 吧css写在js中

**Palette：**MUI调色板，调用需要在makeStyles()传入theme参数, theme可以重写自建也可以调用Palette

常用：

代码	用途	替换
`margin:theme.spacing(1)`	控制距离	`margin:10px`
`borderRadius:theme.shape.borderRadius`	默认圆角	`border-radius:2px`
`[theme.breakponts.up/down('sm')]`	响应式

编写全局theme.js

//新建theme.js
import { createTheme } from '@material-ui/core/styles';
export const theme = createTheme({
  palette: {
    primary: {main:"#111"},
  },
  myButton: {border:"5px solid"}
})
//注意要在index.js加上themeProvider
import { ThemeProvider } from '@material-ui/styles';
import {theme} from "./theme"
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

��调用theme和useStyle

import { Person } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme)=>({
  button: {
    background: 'linear-gradient(90deg, #FE6B8B, #FF8E53)',
    color: 'black',
    height: 48,
    padding: '30px'
  },
  buttonUsePalette: {
    backgroundColor: theme.palette.success.light
  }
}))
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <Button  
        variant="contained"
        color="primary"
        size="large"
        startIcon={<Person/>}
        className={classes.button}
      >
        Material UI
      </Button>
    </div>
  );
}

复杂CSS

  search:{
    display:'flex',
    alignItems:'center',
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    borderRadius: theme.shape.borderRadius,//可以写10px
    '&:hover': {
      backgroundColor: alpha(theme.palette.common.white, 0.25),
    },
    width:'30%',
    padding:'5px 10px',
    [theme.breakpoints.down('sm')]:{
      display:props=>props.open? 'flex' :'none',
      width:'60%'
    }
  },

Tooltip

**Tooltip: **悬停出现文字Toolip->Fab->Icon

<Tooltip title="Add" aria-label="add" >
  <Fab color="primary" className={classes.fab}>
  	<AddIcon />
  </Fab>
</Tooltip>

Avator

**Avator: **头像

<AvatarGroup max={4}>
  <Avatar src='https://material-ui.com/static/images/avatar/1.jpg'/>
  <Avatar src='https://material-ui.com/static/images/avatar/2.jpg'/>
  <Avatar src='https://material-ui.com/static/images/avatar/3.jpg'/>
  <Avatar src='https://material-ui.com/static/images/avatar/4.jpg'/>
  <Avatar src='https://material-ui.com/static/images/avatar/5.jpg'/>
</AvatarGroup>

Typography

**Typography: **类似span，常用参数variant, gutterBottom，一般放文字类

<Typography>Online Users</Typography>

Modal

**Modal: **弹出框，包括Menu, Drawer之类

<Modal open={open} onClose={()=>setOpen(false)} className={classes.modal}>
  <Container className={classes.container}>sad</Container>
</Modal>

ImageList

**ImageList: **图片展示

<ImageList rowHeight={160} className={classes.imageList} cols={3}>
  {itemData.map((item) => (
  <ImageListItem key={item.img} cols={item.cols || 1}>
  <img src={item.img} alt={item.title} />
  </ImageListItem>
  ))}
</ImageList>

<ImageList rowHeight={100} style={{ marginBottom: 20 }} cols={2}>
  <ImageListItem>
    <img src="https://material-ui.com/static/images/image-list/breakfast.jpg"/>
  </ImageListItem>
</ImageList>

Text Field

**Text Field: **文字框，下拉选择框，包括

<Container className={classes.container}>
  <form className={classes.form} autoComplete="off">
    <div className={classes.item}>
      <TextField 
        id="standard-basic" 
        label="Title" size='small' 
        style={{width:'100%'}}
      />
      <TextField
        id="outlined-multiline-static"
        label="Description"
        multiline
        rows={4}
        defaultValue="Tell your story..."
        variant="outlined"
        style={{width:'100%'}}
      />
    </div>
  </form>
</Container>

Radio

**Radio: **现形选择框

<div className={classes.item}>
  <FormLabel component="legend">Who can comment?</FormLabel>
  <RadioGroup >
    <FormControlLabel value="Everybody" control={<Radio size='small'/>} label="Everybody" />
    <FormControlLabel value="Only friends" control={<Radio size='small'/>} label="Only friends" />
    <FormControlLabel value="Nobody" control={<Radio size='small'/>} label="Nobody" />
  </RadioGroup>
</div>

Snack Bar

**Snack Bar: **提供有关应用程序进程的简短消息, 一般和alert搭配使用.

Alert

**Alert: **需要安装npm i @material-ui/lab

import MuiAlert from '@material-ui/lab/Alert';
function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}
const [openAlert,setOpenAlert] = useState(false);
  //照抄MUI handleclose
const handleClose  = (event, reason) => {
  if (reason === 'clickaway') {
    return;
  }
  setOpenAlert(false);};
<Snackbar open={openAlert} autoHideDuration={2000} onClose={handleClose}>
  <Alert severity="success" onClose={handleClose}>
    This is a success message!
  </Alert>
</Snackbar>

App Bar

**Bar: **网站导航栏，一般由好几部分表情组成<AppBar> - <Toolbar> - <Button> - <Icon>等等, <Typography>代替<span>排版

<AppBar>
  <Toolbar>
    <Typography variant='h6'>
      Fei's Web
    </Typography>
  </Toolbar>
</AppBar>

Responsive design

**Break points: **灵活布局，按照页面大小不同显示效果不同. 通常需要创建2个一样的标签

v=value       |0px     600px    960px    1280px   1920px
key           |xs      sm       md       lg       xl
screen width  |--------|--------|--------|--------|-------->
range         |   xs   |   sm   |   md   |   lg   |   xl

const useStyles = makeStyles((theme)=>({
  //屏幕大于sm600px显示lg，小于则显示sm
  lg:{
    display:'none',
    [theme.breakpoints.up('sm')]:{display:'block'}
  },
  sm:{
    display:'block',
    [theme.breakpoints.up('sm')]:{display:'none'}
  }
}))

function Navbar() {
  const classes = useStyles();
  return (
    <div >
      <AppBar>
        <Toolbar>
          <Typography variant='h6' className={classes.lg}>
            Fei's Web
          </Typography>
          <Typography variant='h6' className={classes.sm}>
            FWeb
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Data Display

**Badge: **数据提示，如点赞数，邮件数

<Badge badgeContent={4} color="secondary" className={classes.badge}>
	<Mail />
</Badge>

Container

**Container: **水平居中，基本布局元素

Grid

**Grid: **CSS 的 Flexible Box 模块来实现高灵活性. 通常嵌套出现.Grid-Container-item.总和12

<Grid container>
  <Grid item sm={2} xs={2}>
    <Leftbar />
  </Grid>

  <Grid item sm={7} xs={10}>
    <Feed />
  </Grid>

  <Grid item sm={3} className={classes.right}>
    <Rightbar />
  </Grid>
</Grid>

Card

**Card: **卡片Post，嵌套出现Card->[CardActionArea-CardMedia-CardContent]-[CardActions]

1.Navbar导航

难点：

State传入useStyles，props=>props.open
响应式布局

import { AppBar, InputBase, Toolbar, Typography, Badge, Avatar } from '@material-ui/core';
import { makeStyles,alpha } from '@material-ui/core/styles';
import { Search, Mail, Notifications, Cancel } from '@material-ui/icons';
import React, { useState } from 'react';
const useStyles = makeStyles((theme)=>({
  //屏幕大于sm600px显示lg，小于则显示sm
  toolbar:{
    display:'flex',
    justifyContent:'space-between'
  },

  search:{
    display:'flex',
    alignItems:'center',
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    borderRadius: theme.shape.borderRadius,//可以写10px
    '&:hover': {
      backgroundColor: alpha(theme.palette.common.white, 0.25),
    },
    width:'30%',
    padding:'5px 10px',
    [theme.breakpoints.down('sm')]:{
      display:props=>props.open? 'flex' :'none',
      width:'60%'
    }
  },

  input:{
    color:'white',
    marginLeft:theme.spacing(1),
  },

  cancel:{
    [theme.breakpoints.up('sm')]:{display:'none'},
    marginLeft:'auto',
    '&:hover':{cursor:'pointer'}
  },

  searchButton:{
    marginRight:theme.spacing(2),
    [theme.breakpoints.up('sm')]:{display:'none'},
    '&:hover':{cursor:'pointer'}
  },

  // 小屏幕时，点开search会让buttons消失
  icons:{
    alignItems:'center',
    display:props=>props.open? 'none' :'flex'
  },

  badge:{
    marginRight:theme.spacing(2)
  },

  lg:{
    display:'none',
    [theme.breakpoints.up('sm')]:{display:'block'}
  },

  sm:{
    display:'block',
    [theme.breakpoints.up('sm')]:{display:'none'}
  }
}))

function Navbar() {
  //hooks
  //在小屏情况下点击搜索会让icons按钮消失，显示搜索栏
  const [open, setOpen] = useState(false);
  console.log(open);
  //可以吧state传入useStyles使用
  const classes = useStyles({ open });
  return (
    <AppBar position='fixed'>
      <Toolbar className={classes.toolbar}>
        <Typography variant='h6' className={classes.lg}>
          Fei's Web
        </Typography>
        <Typography variant='h6' className={classes.sm}>
          FWeb
        </Typography>
        
        <div className={classes.search}>
          <Search />
          <InputBase placeholder='Search...' className={classes.input}/>
          <Cancel className={classes.cancel} onClick={()=>setOpen(false)}/>
        </div>

        <div className={classes.icons}>
          {/* 这里是sm情况下的Search */}
          <Search className={classes.searchButton} onClick={()=>setOpen(true)} />
          <Badge badgeContent={4} color="secondary" className={classes.badge}>
            <Mail />
          </Badge>
          <Badge badgeContent={2} color="secondary" className={classes.badge}>
            <Notifications />
          </Badge>
          <Avatar src='https://avatarfiles.alphacoders.com/944/thumb-94447.jpg'/>
        </div>
        
      </Toolbar>
    </AppBar>
  );
}

export default Navbar;

2.LeftBar

import { Container, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { Home,Person,List, PhotoCamera, PlayCircleOutline, TabletMac, Bookmark, Storefront, Settings, ExitToApp, } from '@material-ui/icons';

const useStyles = makeStyles((theme)=>({
  container:{
    height:'100vh',
    paddingTop:theme.spacing(10),
    color:'white',
    position:'sticky',
    top:0,
    backgroundColor:theme.palette.primary.main,
    [theme.breakpoints.up('sm')]:{
      backgroundColor:'white',
      color:'#555',
      border:'1px solid #ece7e7'
    }

  },

  item:{
    display:'flex',
    alignItems:'center',
    marginBottom:theme.spacing(2),
    '&:hover':{
      backgroundColor:'#e6e4e4',
      transition:'color 200ms ease-out',
      cursor:'pointer',
      borderRadius:'20px'},
    [theme.breakpoints.up('sm')]:{padding:'10px'}
  },

  icon:{
   marginRight:theme.spacing(1),
   [theme.breakpoints.up('sm')]:{
    fontSize:'20px'
  }
  },

  text:{
    fontWeight:'700',
    [theme.breakpoints.down('sm')]:{display:'none'}
  }
}))

function Leftbar() {
  const classes = useStyles();
  return (
    <Container className={classes.container}>
      <div className={classes.item}>
        <Home className={classes.icon}/>
        <Typography className={classes.text}>Homepage</Typography>
      </div>
      <div className={classes.item}>
        <Person className={classes.icon}/>
        <Typography className={classes.text}>Perspon</Typography>
      </div>
      <div className={classes.item}>
        <List className={classes.icon}/>
        <Typography className={classes.text}>List</Typography>
      </div>
      <div className={classes.item}>
        <PhotoCamera className={classes.icon}/>
        <Typography className={classes.text}>Camera</Typography>
      </div>
      <div className={classes.item}>
        <PlayCircleOutline className={classes.icon}/>
        <Typography className={classes.text}>Videos</Typography>
      </div>
      <div className={classes.item}>
        <TabletMac className={classes.icon}/>
        <Typography className={classes.text}>Apps</Typography>
      </div>
      <div className={classes.item}>
        <Bookmark className={classes.icon}/>
        <Typography className={classes.text}>Collections</Typography>
      </div>
      <div className={classes.item}>
        <Storefront className={classes.icon}/>
        <Typography className={classes.text}>Market Place</Typography>
      </div>
      <var><div className={classes.item}>
        <Settings className={classes.icon}/>
        <Typography className={classes.text}>Settings</Typography>
      </div>
      <div className={classes.item}>
        <ExitToApp className={classes.icon}/>
        <Typography className={classes.text}>Logout</Typography>
      </div></var>
    </Container>
  );
}

export default Leftbar;

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
build		build
public		public
src		src
.DS_Store		.DS_Store
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

MUI基础

变量

Link

Diver

Button

Styles + Palette

Tooltip

Avator

Typography

Modal

ImageList

Text Field

Radio

Snack Bar

Alert

App Bar

Responsive design

Data Display

Container

Grid

Card

1.Navbar导航

2.LeftBar

About

Releases

Packages

Languages

feifeirun97/web-mui

Folders and files

Latest commit

History

Repository files navigation

MUI基础

变量

Link

Diver

Button

Styles + Palette

Tooltip

Avator

Typography

Modal

ImageList

Text Field

Radio

Snack Bar

Alert

App Bar

Responsive design

Data Display

Container

Grid

Card

1.Navbar导航

2.LeftBar

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages