Reactjs 有没有一种方法可以使用material ui创建一个具有线性进度的按钮？

我想创建一个内置线性进度条的按钮。类似于这种体验，但材料成分：

我知道有一种方法可以将

集成到按钮中，有没有一种方法可以集成

？这对我不起作用

提前谢谢。

类似这样的内容：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import LinearProgress from '@material-ui/core/LinearProgress'

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  button: {
    margin: theme.spacing(1),
  },
}))

export default function ContainedButtons() {
  const classes = useStyles()

  return (
    <div className={classes.root}>
      <Button variant="contained" className={classes.button}>
        <div>
          Demo
          <LinearProgress variant="determinate" value={75} />
        </div>
      </Button>
    </div>
  )
}

从“React”导入React
从“@material ui/core/styles”导入{makeStyles}
从“@material ui/core/Button”导入按钮
从“@material ui/core/LinearProgress”导入LinearProgress
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
按钮：{
边距：主题。间距（1），
},
}))
导出包含按钮的默认函数（）{
常量类=useStyles（）
返回(
演示
)
}

---

很像

CircularProgress

示例，我猜您指的是这个示例，它只是关于如何正确使用CSS

我对该示例进行了分叉，添加了一个集成了

LinearProgress

的按钮，为您提供了一个想法，该示例的相关代码是：

linearProgress: {
  position: "absolute",
  top: 0,
  width: "100%",
  height: "100%",
  opacity: 0.4,
  borderRadius: 4
}
...

<div className={classes.wrapper}>
  <Button
    variant="contained"
    color="primary"
    className={buttonClassname}
    disabled={loading}
    onClick={handleButtonClick}
  >
    Linear
  </Button>
  {loading && (
    <LinearProgress
      color="secondary"
      className={classes.linearProgress}
    />
  )}
  </div>

linearProgress：{
位置：“绝对”，
排名：0，
宽度：“100%”，
高度：“100%”，
不透明度：0.4，
边界半径：4
}
...
线性的
{加载&&(
)}

---

太好了，谢谢。