IT技术 - 如何将 Fab 置于循环进度中？ - 吾爱随笔录

我试图在圆形进度条内居中一个晶圆厂。有人告诉我，我可以为父母使用相对位置，而孩子则拥有绝对位置。我想让它保持响应，所以如果屏幕缩小，它看起来会一样。

这些都是 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;
            }
        }
    }
}

这就是我想要做的：

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);