I'm facing a challenge with centering a material-ui Simple Breadcrumbs component within a footer as opposed to having it aligned to the left. Even though I'm new to this, I thought it would be straightforward but I can't seem to figure it out. I've attempted setting the text-alignment property to center, but that hasn't yielded the desired result.
function Footer() {
return (
<footer>
<SimpleBreadCrumbs />
</footer>
);
}
export default Footer;export default function SimpleBreadcrumbs() {
let year = new Date().getFullYear();
return (
<Breadcrumbs className="breadcrumbs" aria-label="breadcrumb">
<Link color="inherit" href="/" onClick={handleClick}>
Material-UI
</Link>
<Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
Core
</Link>
<Typography color="textPrimary">Copyright © {year}</Typography>
</Breadcrumbs>
);
}