LinearProgress栏将接管整个提示

问题描述

单击按钮以显示线性进度条，通知用户正在处理请求后，我尝试实现LinearProgress @ materail-ui。我在使用LinearProgress进行CSS设计时遇到了困难。当前，LinearProgress正在接管整个dialogPrompt。 LinearProgress taking over the DialogPrompt

这是React按钮中的LinearProgress调用

                 <Button
                    onClick={handleSign}
                    color="primary"
                    disabled={isAuthenticating}
                 >
                    Authenticate
                </Button>
                {isAuthenticating && (
                    <LinearProgress
                        color="primary"
                        className={classes.linearProgress}
                        />
                  )}

我不确定我的问题是否与CSS设计有关，并且想知道是否有人可以在CSS Design中提供帮助，以将线性进度条保持在弹出窗口的底部。

    linearProgress: {
    position: "initial",top: 0,width: "10%",height: "10%",opacity: 0.4,borderRadius: 4
},

谢谢

解决方法

TL; DR：问题是您要在其中放置LinearProgress组件，并将其作为Dialog的第一个子对象（不需要CSS）：

<Dialog ...>
        <LinearProgress color="primary" />
        <DialogTitle .../> 
          ...
</Dialog>

它应该看起来像这样：

NL; PR：：您可以查看此pastebin。单击按钮“打开警报对话框”，将弹出一个线性进度对话框提示。