Блог

Я создал нижний колонтитул, используя 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;

  amp; .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()}amp;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: Ссылка

 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;

  amp; .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()}amp;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. Попробуй это.