Making Material-UI Appbar/Grid responsive - ReactJS

Question

我使用Material-UI@next AppBar建立了一个页脚，我想在网格内的图标居中对齐，并且在响应上，每个网格项应该在一个新的行居中对齐。请建议。在桌面模式下，它们应该在一条直线上。

这是我的代码:

import {
AppBar,
Grid,
Link,
Stack,
Toolbar,
Typography
} from "@material-ui/core";
import React from "react";
import { Facebook, LinkedIn, Twitter } from "@material-ui/icons";
import { styled } from "@material-ui/core/styles";
const StyledLink = styled(Link)`
color: #ffffff;
& .MuiSvgIcon-root:hover {
color: #ffffff;
}
`;
const Footer = () => {
return (
<footer>
<AppBar sx={{ top: "auto", bottom: 0, backgroundColor: "#304659" }}>
<Toolbar variant="dense">
<Grid container spacing={{ xs: 1, sm: 2, md: 4 }}>
<Grid item xs={12} sm={4} justifyContent="center">
<Typography sx={{ color: "white" }}>
{new Date().getFullYear()}&copy; All rights reserved.
</Typography>
</Grid>
<Grid item sm={4} xs={12} textAlign="center">
<Stack direction={"row"} spacing={{ sm: 2 }}>
<StyledLink
href="https://www.twitter.com"
underline="always"
sx={{ color: "white" }}
>
<Twitter />
</StyledLink>
<StyledLink href="https://www.linkedin.com" underline="always">
<LinkedIn />
</StyledLink>
<StyledLink href="https://www.facebook.com" underline="always">
<Facebook />
</StyledLink>
</Stack>
</Grid>
<Grid item xs={12} sm={4} textAlign="right">
<Link
href="https://privacy-policy/"
underline="always"
sx={{ color: "white" }}
>
Privacy Policy
</Link>
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Toolbar />
</footer>
);
};
export default Footer;

CodeSandboxLink:链接

Answer 1

import {
AppBar,
Grid,
Link,
Stack,
Toolbar,
Typography
} from "@material-ui/core";
import React from "react";
import { Facebook, LinkedIn, Twitter } from "@material-ui/icons";
import { styled } from "@material-ui/core/styles";
const StyledLink = styled(Link)`
color: #ffffff;
& .MuiSvgIcon-root:hover {
color: #ffffff;
}
`;
const Footer = () => {
return (
<footer>
<AppBar sx={{ top: "auto", bottom: 0, backgroundColor: "#304659" }}>
<Toolbar variant="dense">
<Grid container spacing={{ xs: 1, sm: 2, md: 4 }}>
<Grid
item
xs={12}
sm={4}
sx={{ textAlign: "center" }}
>
<Typography sx={{ color: "white" }}>
{new Date().getFullYear()}&copy; All rights reserved.
</Typography>
</Grid>
<Grid item sm={4} xs={12} style={{ textAlign: "center" }}>
<StyledLink
href="https://www.twitter.com"
underline="always"
sx={{ color: "white" }}
>
<Twitter />
</StyledLink>
<StyledLink href="https://www.linkedin.com" underline="always">
<LinkedIn />
</StyledLink>
<StyledLink href="https://www.facebook.com" underline="always">
<Facebook />
</StyledLink>
</Grid>
<Grid item xs={12} sm={4} style={{ textAlign: "center" }}>
<Link
href="https://privacy-policy/"
underline="always"
sx={{ color: "white" }}
>
Privacy Policy
</Link>
</Grid>
</Grid>
</Toolbar>
</AppBar>
<Toolbar />
</footer>
);
};
export default Footer;

我只是改变了一些css样式。试试这个。