I am currently struggling with the Material UI dialog component that displays information about a location marker. My issue is with disabling the unattractive box shadow that surrounds the component. Despite setting box-shadow: none and trying different solutions, I can't seem to make it work!
Screenshothttps://i.stack.imgur.com/pGipa.jpg
Below is the code for this particular component:
const useStyles = makeStyles({
root: {
maxWidth: '400px',
marginLeft: '5px',
width: '446px',
height: '200px',
marginTop: '50px',
overflow: 'hidden',
boxShadow: 'none',
},
closeButton: {
color: Colours.Black,
float: 'right',
paddingTop: '15px',
marginRight: '5px',
marginLeft: 'auto',
height: '24px',
width: '24px',
},
flexContainerContent: {
display: 'flex',
justifyContent: 'space-between',
paddingRight: '10px',
},
flexContainerButtons: {
display: 'flex',
justifyContent: 'space-between',
padding: '0px 18px 15px 18px',
},
});
const InfoWindow = ({
title,
address,
open,
handleClose,
}: {
title: string;
address: string;
open: boolean;
handleClose: () => void;
}) => {
const infoStyles = useStyles();
return (
<Dialog
classes={{ root: infoStyles.root }}
open={open}
onClose={handleClose}
hideBackdrop
disableEnforceFocus
>
<Container classes={{ root: infoStyles.flexContainerContent }}>
<DialogContent style={{ overflow: 'hidden', paddingLeft: '0px', boxShadow: 'none' }}>
<Typography variant="body1" color="textSecondary">
Name:
<span
style={{ display: 'inline', color: Colours.Black }}
color="textPrimary"
>
{` ${title} `}
</span>
</Typography>
<Typography variant="body1" color="textSecondary">
Location:
<span
style={{ display: 'inline', color: Colours.Black }}
color="textPrimary"
>
{` ${address} `}
</span>
</Typography>
</DialogContent>
<CloseIcon
onClick={handleClose}
classes={{ root: infoStyles.closeButton }}
/>
</Container>
<DialogActions style={{ padding: '0px', boxShadow: 'none' }}>
<Container classes={{ root: infoStyles.flexContainerButtons }}>
<Button size="small" style={{ color: Colours.Danger }}>
Delete
</Button>
<Button size="small" style={{ color: Colours.Secondary }}>
Edit
</Button>
</Container>
</DialogActions>
</Dialog>
);
};
export default InfoWindow;If you have any advice or suggestions on how to resolve this issue, your help would be greatly appreciated!