Let me start by saying I am very new to JavaScript and React. I am making a page that has a title and a MUI table underneath it which currently looks like this:
However, I want to add space between the title and the table, but I can't figure out how to.
This is what the code looks like:
return (
<div className="dates" >
<div>
<h1 style={{ fontSize: 40 }}>Upcoming Import Dates</h1>
</div>
<div>
<TableContainer component={Paper} style={{ width: 900, backgroundColor: "#dbdbdb"}}>
<Table>
<TableHead>
<TableRow >
<TableCell align="left" style={{ width: 200 }}>Date</TableCell>
<TableCell align="left">Time</TableCell>
<TableCell align="left">Event</TableCell>
<TableCell align="left" style={{ width: 350 }}>Location</TableCell>
</TableRow>
</TableHead>
<TableBody>
{dates.map((dates) => (
<TableRow key={dates.number}>
<TableCell align="left">{dates.EventDate}</TableCell>
<TableCell align="left">{dates.StartTime}</TableCell>
<TableCell align="left">{dates.Description}</TableCell>
<TableCell align="left">{dates.Location}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
);
I have tried adding margin-bottom to a css class and adding it to the div, but that did not work. I've looked online and can't seem to find anything so any help would be appreciated.