1

我正在为我的项目制作页脚。我正在为页脚使用材质 UI 网格，所以我想在底部添加徽标，但我不明白为什么它有正确的填充（我猜它是填充，不确定）。

屏幕截图-> 是这样的。（出于隐私原因模糊了徽标） 在此处输入图像描述

Code Footer.js React 组件 ->

import React from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";

import logoWhite from "../logos/logoWhite.png";

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary">
      {"Copyright © "}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "column",
    minHeight: "100vh",
  },
  main: {
    marginTop: theme.spacing(8),
    marginBottom: theme.spacing(2),
  },
  footer: {
    padding: theme.spacing(3, 2),
    marginTop: "auto",
    backgroundColor: "#312D2D",
    color: "white",
    height: 167,
  },
  footerGrid: {
    width: "20%",
    marginLeft: 40,
    marginTop: 35,
    pading:0,
    border: "2px solid red"
  },
  footerLogo: {
      minWidth: "50%",
      maxWidth: "60%",
      width: "auto",
      margin: "0 auto",
      backgroundColor: "pink"
  },
  footerGridLogo: {
      width: "fit-content",
      pading:0,
      borderRight: "1px solid white",
      margin:0,
      border: "4px solid green"
  }
}));

export default function Footer() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <CssBaseline />
      <footer className={classes.footer}>
        <Grid spacing={0} className={classes.footerGrid}>
          <Grid item className={classes.footerGridLogo}>
              <img
                src={logoWhite}
                alt="brandlogo"
                className=""
                className={classes.footerLogo}
              />
          </Grid>
        </Grid>
      </footer>
    </div>
  );
}

希望它看起来像这样-> 在此处输入图像描述

4

1 回答 1

0

在 Grid 项目标签 style={{display:'flex',justifyContent:'center',alignItems:'center'}} 中添加这个内联样式

于 2021-10-21T03:41:18.710 回答