如何創建具有透明背景顏色的 MUI 對話框？

Question

我正在嘗試使用 MUI 創建加載狀態指示器。 但我希望對話框的背景顏色為none ，並且還想調整高度。 但是我無法通過他們提供的樣式選項來做到這一點。 任何解決方案？

現在看起來像這樣..

代碼如下所示：

<Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
    <RefreshIndicator
      style= {{display: 'inline-block'}}
      size={50}
      left={50}
      top={30}
      loadingColor="#FF9800"
      status="loading"    
    />
</Dialog>

Answer 1

在材料 v4 或最新版本中。 您可以使用BackdropProps ，請參閱在線演示

Answer 2

對於最新版本（ "@material-ui/core": "^1.2.3" ），以下是它的完成方式：

<Dialog
  {...otherProps}
  PaperProps={{
    style: {
      backgroundColor: 'transparent',
      boxShadow: 'none',
    },
  }}
>
  {/* ... your content ... */}
</Dialog>

記下新的PaperProps道具。 它不在文檔中，但是如果你查看源代碼，他們使用PaperProps作為你可以傳遞的道具之一 - 因為這不在文檔中，但是這可能會隨着未來的版本而改變，所以在這里要小心。

Answer 3

您可以在Dialog上設置overlayStyle prop以更改背景顏色，如下所示：

 <Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  overlayStyle={{backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
  >

Answer 4

直接你可以使用帶有css屬性， zIndex和opacity CircularProgress ，試試這個：

<CircularProgress size={2} style={Styles.mainLoader}/>

mainLoader: { 
    position: 'absolute',
    paddingTop: '15%',      
    width: '100%',
    height: '100%',
    zIndex: 1000,
    backgroundColor: '#000000',
    opacity: 0.5,
    textAlign: 'center',
}

它將以.5不透明度和指定背景覆蓋整個屏幕。

Answer 5

您可以直接使用組件CircularProgress （而不是使用Dialog構建loding指示器： http ： //www.material-ui.com/#/components/circular-progress

您可以將加載指示器放在位於頁面中間的div中：

JSX：

<div className="my-spinner">
    <CircularProgress size={59.5} />
</div>

CSS：

.my-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-
}

Answer 6

像這樣使用bodyStyle道具：

<Dialog
  bodyStyle={{margin:0, padding:0}}
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
    <RefreshIndicator
      style= {{display: 'inline-block'}}
      size={50}
      left={50}
      top={30}
      loadingColor="#FF9800"
      status="loading"    
    />
</Dialog>

Answer 7

您不必使用透明的Dialog ，MUI 會公開Dialog在幕后使用的Backdrop組件。 Backdrop讓您可以將任何內容放在變暗的圖層中，而無需處理物理容器：

<Backdrop
  sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
  open={open}
  onClick={handleClose}
>
  <Stack gap={1} justifyContent="center" alignItems="center">
    <CircularProgress color="inherit" />
    <Typography>Loading...</Typography>
  </Stack>
</Backdrop>

現場演示

Answer 8

你可以使用BackgropProps<\/a>

無論您是否可以使用作為Dialog<\/a>的低級組件的Modal<\/a>本身，或者您可以堅持使用 Dialog 它都適用。

<Modal BackdropProps={{ style: { backgroundColor: "green" } }} ></Modal>

Answer 9

另一個可能的替代方案（取決於您想要實現的目標）是避免為Dialog容器使用Paper組件。 例如，如果您改用Box組件，用戶將看不到它：

<Dialog
  className="MyDialog"
  open={!!openProp}
  onClose={handleDialogClose}
  maxWidth="xl"
  PaperComponent={Box}
>

請注意，默認情況下它仍將包含一個“不可見”的填充（如果您使用fullWidth ，甚至會覆蓋大部分屏幕），這可能會讓用戶感到困惑，因為在這個不可見的范圍內單擊時對話框不會關閉零件。

Answer 10

<Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
BackdropProps={{invisible: true}}
>
    <RefreshIndicator
      style= {{display: 'inline-block'}}
      size={50}
      left={50}
      top={30}
      loadingColor="#FF9800"
      status="loading"    
    />
</Dialog>

• 項目清單

刪除 backgroundColor: 'transparent' 並添加 BackdropProps={{invisible: true}}

Answer 11

如果您使用的是styled-components ，
我們也可以通過.MuiDialog-paper class來覆蓋更多的CSS方式，如下：

import styled from "styled-components";
import { Dialog } from "@mui/material";

const StyledDialog = styled(Dialog)`
  & .MuiDialog-paper {
    background-color: transparent !important;
  }
}