Как создать диалоговое окно «материал-ui» с прозрачным цветом фона и изменить его высоту?

Question

Я пытаюсь создать индикатор состояния загрузки, используя материал ui. Но я хочу, чтобы цвет фона диалогового окна был none, а также хотите отрегулировать высоту. Но я не могу сделать это по предложенному им варианту стиля. Любое решение? Now it looks like this.. код выглядит следующим образом:

<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

Существует компонент CircularProgress, который можно использовать непосредственно (вместо построения индикатора Loding с помощью Dialog: 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 2

Непосредственно вы можете использовать CircularProgress со свойствами CSS, zIndex и opacity, Попробуйте это:

<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 3

Вы можете установить overlayStyle опору на диалоге, чтобы изменить цвет фона, например, так:

<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

Используйте 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>