We Keep Coding

The split method is not working - want to split the date

I'm trying to split the date on both release_date and first_air_date however the split() method isn't working for me. What am I doing wrong - please explain! I'm a beginner. Many thanks in advance!
Below is my code:
import { Typography } from "#mui/material";
import { Box } from "#mui/system";
import React from "react";
function Card({ daily }) {
let text = daily.release_date;
let airDate = daily.first_air_date;
const myArray = text.split("-");
const splitDate = airDate.split("-");
const word = myArray[0];
const date = splitDate[0];
console.log(word);
console.log(date);
return (
<Box
sx={{
width: "25%",
height: "550px",
backgroundColor: "#144272",
alignSelf: "flex-start",
borderRadius: "10px",
}}
>
<Box
sx={{
width: "100%",
height: "85%",
backgroundColor: "red",
borderRadius: "20px",
}}
>
<img
className="img-src"
src={`https://image.tmdb.org/t/p/w500/${daily.poster_path}`}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
align: "center",
fontFamily: "Open Sans, sans-serif",
fontWeight: "normal",
fontSize: "20px",
color: "#fff",
margin: "5px 10px",
flexDirection: "column",
}}
>
{daily.original_title ? (
<Typography sx={{}}>{daily.original_title}</Typography>
) : (
<Typography sx={{}}>{daily.name}</Typography>
)}
<Typography
sx={{
fontFamily: "Open Sans, sans-serif",
fontWeight: "lighter",
fontSize: "15px",
color: "#fff",
margin: "5px 10px",
}}
>
{/*word*/}
</Typography>
{daily.release_date ? (
<Typography sx={{}}>{text}</Typography>
) : (
<Typography sx={{}}>{/*airDate*/}</Typography>
)}
</Box>
</Box>
);
}
export default Card;
I used the split() method in another component, here is the code for that one and it worked fine:
import React from "react";
function Card({ recomendations }) {
let text = recomendations.release_date;
const myArray = text.split("-");
let word = myArray[0];
console.log(word);
return (
<Box
sx={{
width: "25%",
height: "550px",
backgroundColor: "#144272",
alignSelf: "flex-start",
borderRadius: "10px",
}}
>
<Box
sx={{
width: "100%",
height: "85%",
backgroundColor: "red",
borderRadius: "20px",
}}
>
<img
className="img-src"
src={`https://image.tmdb.org/t/p/w500/${recomendations.poster_path}`}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
align: "center",
fontFamily: "Open Sans, sans-serif",
fontWeight: "normal",
fontSize: "20px",
color: "#fff",
margin: "5px 10px",
flexDirection: "column",
}}
>
<Typography sx={{}}>{recomendations.original_title}</Typography>
<Typography
sx={{
fontFamily: "Open Sans, sans-serif",
fontWeight: "lighter",
fontSize: "15px",
color: "#fff",
margin: "5px 10px",
}}
>
{word}
</Typography>
</Box>
</Box>
);
}
export default Card;

MUI grid dynamic squares

I have a Material UI grid component. I need the child grid items to increase in size with the viewport, but to also maintain the square dimensions.
Reproducible example: https://codesandbox.io/s/material-ui-grid-demo-forked-6ws4yj?file=/src/index.js
Grid component:
<Box sx={{ width: { xs: "100%", lg: "80%", xl: "100%" } }}>
<Grid
container
columns={{ xs: 2, lg: 2, xl: 4 }}
rowSpacing={{ xs: 1, xl: 2 }}
columnSpacing={{ xs: 1, xl: 2 }}
>
{tiles.map((tile) => (
<Grid item key={tile} xs={1} lg={1} xl={1}>
<Box
sx={{
width: {
xs: "calc(100% - 4px)",
lg: "calc(100% - 4px)",
xl: "100%"
},
height: { xs: "139.5px", lg: "164px", xl: "198px" },
border: "1px solid black",
borderRadius: 2,
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
}}
>
test
</Box>
</Grid>
))}
</Grid>
</Box>
How can I have the height change dynamically with the width to keep the square ratio?

Extra white space above Grid component from Material UI

When applying Grid to my post layout on my social media website, for some reason I am left with extra white space above the Grid element or GIF in this case. How do I remove this extra white space? Here is an image of the whitespace:
Here is an image of what logged for the whitespace via inspect:
Here is the code in question:
import { useEffect, useState, useMemo, useRef } from "react";
import userInformation from "../../services/userInformation";
import { Link, useNavigate } from "react-router-dom";
import ReactPlayer from 'react-player'
import VectorIllustration from "./VectorIllustration";
import AvatarPicture from '../../images/AvatarPicture.png'
import HomeTwoToneIcon from '#mui/icons-material/HomeTwoTone';
import { Avatar } from "#nextui-org/react";
import PageviewTwoToneIcon from '#mui/icons-material/PageviewTwoTone';
import GroupsTwoToneIcon from '#mui/icons-material/GroupsTwoTone';
import EmailTwoToneIcon from '#mui/icons-material/EmailTwoTone';
import SettingsApplicationsTwoToneIcon from '#mui/icons-material/SettingsApplicationsTwoTone';
import { Dialog, Button, IconButton, ImageList, ImageListItem, InputAdornment, DialogTitle } from "#mui/material";
import { TextField, Grid } from "#mui/material";
import { useDispatch, useSelector } from "react-redux";
import { storeUserInformation } from "../../reducers/storeInformationReducer";
import { Loading } from '#nextui-org/react'
import '../../style-sheets/Home.css'
import FavoriteBorderTwoToneIcon from '#mui/icons-material/FavoriteBorderTwoTone';
import FavoriteIcon from '#mui/icons-material/Favorite';
import HeartBrokenIcon from '#mui/icons-material/HeartBroken';
import MessageIcon from '#mui/icons-material/Message';
import IosShareOutlinedIcon from '#mui/icons-material/IosShareOutlined';
import MessageOutlinedIcon from '#mui/icons-material/MessageOutlined';
import InfiniteScroll from 'react-infinite-scroll-component'
import ViewProfileBox from "./ViewProfileBox";
const Home = () => {
const state = useSelector(state => state)
const [savedUser, setSavedUser] = useState()
const [like, setLike] = useState([])
const [mouseOver, setMouseOver] = useState(false)
const [replies, setReplies] = useState([])
const [numberOfPosts, setNumberOfPosts] = useState(Array.from({ length: 5}))
const [hasMore, setHasMore] = useState(true)
const [open, setOpen] = useState(false)
const [imageToView, setImageToView] = useState('')
const dispatch = useDispatch();
const navigate = useNavigate();
useEffect(() => {
const initializer = async () => {
const user = await JSON.parse(window.localStorage.getItem('loggedAppUser'))
setSavedUser(user)
userInformation.setToken(user.token)
const response = await userInformation.findUser(user.user.email)
const arrayOfKeys = Object.keys(response.data.user)
const arrayOfValues = Object.values(response.data.user)
let i = 0
arrayOfKeys.forEach(element => {
dispatch(storeUserInformation(arrayOfValues[i], element))
i++
});
}
initializer()
}, [])
useEffect(() => {
setLike(numberOfPosts.map((post, i) => (like[i] === undefined ? false : like[i])))
setReplies(numberOfPosts.map((post, i) => (replies[i] === undefined ? false : replies[i])))
}, [numberOfPosts])
const handleLike = (index) => {
setLike(like.map((val, i) => index === i ? !val : val));
}
const handleReplies = (index) => {
setReplies(replies.map((val, i) => index === i ? !val : val));
}
const handleOpen = (e) => {
setOpen(true)
setImageToView(e)
}
const handleClose = () => setOpen(false)
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
const fetchMoreData = () => {
console.log(state.posts)
console.log(numberOfPosts.length)
if ((Object.entries(state.posts)).length - numberOfPosts.length < 5) {
setTimeout(() => {
setNumberOfPosts(numberOfPosts.concat(Array.from({length: ((Object.entries(state.posts)).length - numberOfPosts)})))
}, 1500)
setHasMore(false)
return;
} else {
setTimeout(() => {
setNumberOfPosts(numberOfPosts.concat(Array.from({length: 5})))
}, 1500)
}
}
return (
<>
<div style={{
position: 'relative',
width: '1920px',
height: '1080px',
background: '#F7F9FE'}}>
<VectorIllustration />
<h1 style={{position: 'absolute', width: '30%', height: '5%', left: '20%', top: '4%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '32px', lineHeight: '40px', color: '#000000'}}>Welcome {state.storage.name}!</h1>
<Link to='/home' style={{position: 'absolute', width: '10%', height: '6.5%', left: '2%', top: '20%', background: 'linear-gradient(90deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 93.56%)', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Home</Link>
<HomeTwoToneIcon style={{position: 'absolute', left: "3%", top: '21.5%', fontSize: '225%'}} color='primary' />
<Avatar src={state.storage.profileImageURL ? state.storage.profileImageURL : AvatarPicture} style={{position: 'absolute', left: '83.5%', top: '11%', height: '132px', width: '132px'}}></Avatar>
<Link to='/findasponsor' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '29%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Find A Sponsor</Link>
<PageviewTwoToneIcon style={{position: 'absolute', left: "3%", top: '30.5%', fontSize: '225%', opacity: '0.7'}} />
<Link to='/Groups' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '37%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Groups</Link>
<GroupsTwoToneIcon style={{position: 'absolute', left: "3%", top: '38.6%', fontSize: '225%', opacity: '0.75'}} />
<Link to='/Messsages' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '45%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Messages</Link>
<EmailTwoToneIcon style={{position: 'absolute', left: "3%", top: '46.5%', fontSize: '225%', opacity: '0.75'}} />
<Link to='/Settings' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '54%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Settings</Link>
<SettingsApplicationsTwoToneIcon style={{position: 'absolute', left: "3%", top: '55.5%', fontSize: '225%', opacity: '0.75'}} />
<h1 style={{position: 'absolute', width: '201px', height: '76px', left: '4%', top: '68%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '26px', lineHeight: '38px', textAlign: 'center', color: '#1B1C1F', textDecoration: 'underline'}}>Go Local</h1>
<p style={{position: 'absolute', width: '201px', height: '76px', left: '4%', top: '73%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '15px', textAlign: 'center', color: 'black'}}>Currently, you are viewing sponsors/ sponsees globally. Would you like to view only sponsors/sponsees in your country?</p>
<Button style={{position: 'absolute', left: '4.5%', top: '85%', background: '#FFFFFF', borderRadius: '16px'}}>No</Button>
<Button style={{position: 'absolute', left: '10.5%', top: '85%', background: '#FFFFFF', borderRadius: '16px'}} onClick={(e) => navigate('./Settings')}>Yes</Button>
<h1 style={{position: 'absolute', top: '70%', left: '78%'}}>Trending Users</h1>
<Link to='/home/:id' style={{position: 'absolute', top: '73.25%', left: '94%'}}>View all</Link>
<p style={{position: 'absolute', top: '20%', left: '79%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '600', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.followers}</p>
<p style={{position: 'absolute', top: '23%', left: '77.5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '16px', lineHeight: '20px', textAlign: 'center', color: '#A2ADBC'}}>Followers</p>
<p style={{position: 'absolute', top: '20%', left: '94.5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '600', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.following}</p>
<p style={{position: 'absolute', top: '23%', left: '93%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '16px', lineHeight: '20px', textAlign: 'center', color: '#A2ADBC'}}>Following</p>
<h1 style={{position: 'absolute', top: '28%', left: '83.6%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.name}</h1>
<p style={{position: 'absolute', width: '360px', height: '54px', left: '77.6%', top: '33%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '14px', lineHeight: '18px', textAlign: 'center', color: '#6D7683'}}>{state.storage.biography}</p>
<ViewProfileBox savedUser={savedUser}/>
{(Object.values(state.posts)).length !== 0 ?
<InfiniteScroll height='100%' dataLength={numberOfPosts.length} next={fetchMoreData} hasMore={hasMore} loader={<Loading style={{position: 'absolute', left: '50%'}}/>}
id='all-post-container' scrollThreshold={0.5} endMessage={<p style={{ textAlign: "center" }}>
<b>That's all folks!</b>
</p>}
style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: '#F7F9FE', height: '72%', width: "54%", borderRadius: '30px'}}>
<Grid
container
direction="column"
justifyContent="center"
alignItems="center"
spacing={15}
>
{numberOfPosts.map((key, i) => {
return (
<Grid container item>
<Grid item xs={12} container style={{backgroundColor: 'white', paddingTop: '20px'}}>
{/* avatar, username, etc */}
<Grid item xs={1} container style={{ justifyContent: "center" }}>
<Avatar src={AvatarPicture} />
</Grid>
<Grid item container xs={11} style={{ gap: "10px" }}>
<Grid item xs={11}>
#{state.posts[i]?.username}
</Grid>
<Grid item xs={11}>
{state.posts[i]?.location} {state.posts[i]?.date}
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post text */}
<p
className="Post"
style={{
padding: "1em",
backgroundColor: "#FFFBEE",
borderRadius: "20px",
margin: '1%'
}}
>
{state.posts[i]?.text}
</p>
</Grid>
{state.posts[i]?.video && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post video */}
<ReactPlayer url={state.posts[i].video} controls width='100%'/>
</Grid>
)}
<Grid container wrap="nowrap">
{state.posts[i]?.images && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post image */}
<ImageList sx={{overflowX: 'auto' }} rowHeight={200}>
<ImageListItem sx={{display: 'flex', flexDirection: 'row'}}>
{state.posts[i].images.map(image => {
return (
<img
src={image}
alt='title'
loading='lazy'
style={{paddingRight: '1em', objectFit: 'contain'}}
onClick={(e) => handleOpen(e.target.src)}
/>
)
})}
<Dialog
open={open}
onClose={handleClose}
style={{ maxWidth: "100%", maxHeight: "100%" }}
BackdropProps={{invisible: true}}
>
<img
style={{ width: 'auto', height: '100%' }}
src={imageToView}
alt="image"
/>
</Dialog>
</ImageListItem>
</ImageList>
</Grid>
)}
</Grid>
<Grid container wrap="nowrap">
{state.posts[i]?.gif && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post gif */}
<img src={state.posts[i].gif} style={{objectFit: 'contain'}} />
</Grid>
)}
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* icon bar */}
<Grid container style={{ padding: 12, gap: 20 }}>
<Grid item>
<IconButton
onClick={() => handleLike(i)}
onMouseLeave={() => setMouseOver(false)}
onMouseOver={() => setMouseOver(true)}
>
{like[i]&& mouseOver ? (
<HeartBrokenIcon style={{ color: "red" }} />
) : like[i] ? (
<FavoriteIcon style={{ color: "red" }} />
) : (
<FavoriteBorderTwoToneIcon />
)}
</IconButton>{" "}
{state.posts[i]?.likes}
</Grid>
<Grid item>
<IconButton onClick={() => handleReplies(i)}>
{replies[i] ? (
<MessageIcon color="primary" />
) : (
<MessageOutlinedIcon />
)}
</IconButton>{" "}
{state.posts[i]?.comments}
</Grid>
<Grid item>
<IconButton>
<IosShareOutlinedIcon />
</IconButton>{" "}
{state.posts[i]?.shares}
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white', borderRadius: '16px'}}>
{/* comment */}
<TextField
InputProps={{
startAdornment: (
<InputAdornment>
<Avatar src={state.storage.profileImageURL} style={{ marginRight: 12 }} />
</InputAdornment>
),
classes: {
notchedOutline: "notched-outline-border-radius"
},
maxLength: 500
}}
maxRows={10}
multiline
placeholder="Write your comment"
style={{ width: "100%" }}
/>
</Grid>
</Grid>
)})}
</Grid>
</InfiniteScroll> : <div id='content-loader' style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: '#F7F9FE', height: '72%', width: "54%", borderRadius: '30px'}}><Loading size='lg' style={{position: 'absolute', left: '50%', top: '50%'}}/></div>}
</div>
</>
)
}
export default Home;
Here is the code that deals specifically with the posting of a gif:
<Grid container wrap="nowrap">
{state.posts[i]?.gif && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post gif */}
<img src={state.posts[i].gif} style={{objectFit: 'contain'}} />
</Grid>
)}
</Grid>

I found the solution. The whitespace had the same measurements for the Grid of the post for images. For some reason, even though a post only had a GIF, it was acting as if it also had an image because images is set with an empty array, so to avoid the Grid for images to be rendered i placed a state.posts[i].images.length > 0 ultimatum so there has to be at least 1 image for the image Grid to execute...

How to overlay the expand of accordion?

I would like to overlay the expand of the accordion but I don't know whoch part should I do. in the first picture show that output I want it overlay the other textfield when clicking the dropdown icon, as for the second picture show my current output which every time I click the dropdown it does not overlay rather it adjust the textfield. any advice?
What I want:
My current output:
my code:
<Accordion expanded={isExpanded} onClick={() => setExpanded(!isExpanded)}>
<AccordionSummary
expandIcon={<Icon icon={IMAGE.DropIcon} classStyle={classes.icon} />}>
{changeType}
</AccordionSummary>
<AccordionDetails>
<Button
className={classes.button}
onClick={() => onChangeType('GOLD')}>
GOLD
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('GEMS')}>
GEMS
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('COINS')}>
COINS
</Button>
</AccordionDetails>
</Accordion>
my styles:
const Accordion = withStyles({
root: {
padding: 0,
marginBottom:'1rem',
borderRadius: '8px',
boxShadow: 'none',
minHeight: '2em',
width: '15vw',
fontSize: '1.5em',
fontWeight: 600,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
'&$expanded': {
minHeight: '2em',
padding: 0,
marginTop: 2,
marginBottom: 2,
},
},
expanded: {},
})(MuiAccordion);
const AccordionSummary = withStyles({
root: {
margin: 0,
padding: '0 0 0 1em',
display: 'flex',
flexDirection: 'row',
borderRadius: '8px',
border: '1px solid',
minHeight: '2em',
width: '13.7vw',
'&$expanded': {
minHeight: '2em',
},
'& .MuiAccordionSummary-expandIcon.Mui-expanded': {
transform: 'none',
},
'& .MuiAccordionSummary-expandIcon': {
transform: 'none',
transition: 'none',
},
'& .MuiIconButton-edgeEnd': {
margin: 0,
padding: 0,
},
},
content: {
margin: 0,
'&$expanded': {
margin: 0,
},
},
expanded: {},
})(MuiAccordionSummary);
const AccordionDetails = withStyles(() => ({
root: {
padding: '0',
display: 'flex',
flexDirection: 'column',
width: '100%',
},
}))(MuiAccordionDetails);

You can add overlay by adding z-index to the AccordionDetails.
<Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
<div style={{zIndex:1 ,position:'absolute' ,width:'100%'}}>
<Card >
<AccordionDetails>
<Button>GOLD</Button>
<Button>GEMS</Button>
<Button>COINS</Button>
</AccordionDetails>
</Card>
</div>
</Accordion>
{/* Other contents of the page */}

hey I was looking to Accadian docs https://mui.com/components/accordion/
and all you need to do is just add some for AccordionDetails like background color , and to match the image some padding at the bottom, border and border radius and I tried this for demonstrate this here https://stackblitz.com/edit/react-k3tktv?file=demo.js

Material UI Dialog Box Shadow Removal

I am currently using the Material UI dialog to show some information about a location marker. I would like to disable the ugly box shadow surrounding the component. I have set box-shadow: none and have tried multiple solutions, but none of them seem to work!
Screenshot
Here is my code for this 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;
Would really appreciate any sort of help or advice!

You need to target the Paper inside the Dialog.
One way of doing this is adding this CSS rule:
.MuiDialog-container .MuiPaper-root {
box-shadow: none;
}