Currently, I am using Material UI in conjunction with React to create a dialog that appears when a button is tapped. This button is located within a table, which is displayed over a Paper component. The problem arises when I utilize the dialog with its default styling - the background turns black. In an attempt to rectify this issue, I adjusted the styling to be transparent. Unfortunately, this caused a gray artifact to appear behind the dialog. Below is the original dialog with default styling:
https://i.sstatic.net/Eo1jJ.png
The modified dialog with transparent attributes:
<Dialog
title="ALERT - Confirm Action? "
modal={false}
overlayStyle={{backgroundColor: 'transparent'}}
bodyStyle={{margin:0, padding:0}}
actions={
<div>
<FlatButton
label="Cancel"
primary={true}
onClick={this.handleCloseTwo}
/>
<FlatButton
label="Submit"
type="submit"
primary={true}
keyboardFocused={true}
onClick={() => {
this.setState({ dialogTwo: false });
}}
/>
</div>
}
open={this.state.dialogTwo}
>
</Dialog>
This is how it now appears after the modifications: https://i.sstatic.net/BtScB.png