Button

mui的Button从样式上分，大体有3类:

• Text button
• Contained button
• Outlined button

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

我们可以传入以下props:

• size: large、small、 medium
• color: secondary、success .etc
• disabled
• href
• startIcon/endIcon

demo如下：

import React, { memo } from 'react'
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';

const App = memo(() => {
  return (
    <div>
      <Button variant="outlined" startIcon={<DeleteIcon />}>
        Delete
      </Button>
      <Button variant="contained" endIcon={<SendIcon />}>
        Send
      </Button>
      <Stack direction="row" spacing={2}>
      <Button variant="outlined">Primary</Button>
      <Button variant="outlined" disabled>
        Disabled
      </Button>
      <Button variant="outlined" href="#outlined-buttons">
        Link
      </Button>
    </Stack>
    </div>
  )
})

页面展示:

更多，请参看官方文档

Icon Button

普通icon就是个平淡无奇的icon，但是用IconButton包裹的icon（也可以是其他元素，如文字）就有一个点击触摸的特效，非常好看

import React, { memo } from 'react'
import { IconButton } from '@mui/material';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';

const App = memo(() => {
  return (
    <div>
      <DeleteOutlineOutlinedIcon/>
      <IconButton aria-label="delete"  color='secondary'>
          <DeleteOutlineOutlinedIcon/>
      </IconButton>
    </div>
  )
})

export default App

Loading Button

为了增加用户体验，我们在提交数据的时候可以给button添加一些loading效果

在mui中，要想使用Loading Button，需要安装额外的库

npm i @mui/lab -S

来看下面这个demo:

import LoadingButton from '@mui/lab/LoadingButton';
import React, { memo } from 'react'
import SaveIcon from '@mui/icons-material/Save';

const App = memo(() => {
  return (
    <div>
      <LoadingButton loading variant="outlined">
        Submit
      </LoadingButton>
      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
        Fetch data
      </LoadingButton>
      <LoadingButton
        loading
        loadingPosition="start"
        startIcon={<SaveIcon />}
        variant="outlined"
      >
        Save
      </LoadingButton>
    </div>
  )
})

export default App

模拟后台数据提交：

import LoadingButton from '@mui/lab/LoadingButton';
import React, { memo, useState } from 'react'
import { Button } from '@mui/material';

const App = memo(() => {
  const [isFetching, setIsFetching] = useState(false)

  const submit = () =>{
    setIsFetching(true)
    //模拟http request
    setTimeout(()=>{
      //if success: navigate to specific path
      window.location.href='/'
      //if error: 红色警告
    },2000)
  }
  return (
    <div>
      {
        isFetching? ( <LoadingButton loading variant="outlined">
        Submit
      </LoadingButton>):<Button variant='contained' onClick={submit}>提交</Button>
      }     
    </div>
  )
})

export default App