如何将 Fab 置于循环进度中？答案

【问题标题】：How do I center a Fab inside a circular progress?如何将 Fab 置于循环进度中？
【发布时间】：2019-12-12 21:54:48
【问题描述】：

我正在尝试将一个晶圆厂置于圆形进度条的中心。有人告诉我，我可以使用父级的相对位置，而子级具有绝对位置。我想让它保持响应，所以如果屏幕按比例缩小，它看起来会一样。

这些都是 Material UI 组件。

            <div className="event-dialog-header">
                <DialogTitle id="form-dialog-title">Event Details</DialogTitle>   
                <div className="event-dialog-delete">        
                { props.selectedEvent &&
                    <Fab aria-label="delete" size="small" onClick={handleOpenAlert} >
                        {success ? <CheckIcon /> : <DeleteIcon />}
                    </Fab> 
                }
                <CircularProgress size={68}  />
                </div>
            </div>

.event-dialog {
    .event-dialog-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .event-dialog-delete {
            position: relative;
            .MuiCircularProgress-root {
                position: absolute;
                top: 0;
                right: 0;
            }
            .MuiFab-sizeSmall {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }
}

这就是我想要做的：

【问题讨论】：

标签： reactjs sass material-ui

【解决方案1】：

你有正确的起点。您只需要调整 Fab 的位置和 CircularProgress 的大小即可。

这是一个工作示例：

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

import Fab from "@material-ui/core/Fab";
import DeleteIcon from "@material-ui/icons/Delete";
import CircularProgress from "@material-ui/core/CircularProgress";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  eventDialogDelete: {
    position: "relative",
    "& .MuiCircularProgress-root": {
      position: "absolute",
      // Moving this a little off the edge prevents horizontal scrollbar from flickering in and out
      top: 3,
      right: 3
    },
    "& .MuiFab-sizeSmall": {
      position: "absolute",
      top: 9,
      right: 9
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <div className={classes.eventDialogDelete}>
      <Fab aria-label="delete" size="small">
        <DeleteIcon />
      </Fab>
      <CircularProgress size={52} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：