在 Avatar 组件下方居中社交媒体图标

Question

我正在尝试将我的社交媒体图标对齐到 Avatar 组件下方。正如您在 JSS 中看到的那样，我已尝试使用我所知道的所有方式将其居中。我也尝试过不使用 JSS 定位社交媒体图标，因为其余内容应该居中。如果我不针对它，它会将图标像一列一样堆叠在一起。如有任何建议，我们将不胜感激。

import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Spinner from "../layout/Spinner";
import Navbar from "../dashboard/Navbar";
import TwitterIcon from '@material-ui/icons/Twitter';
import FacebookIcon from '@material-ui/icons/Facebook';
import YouTubeIcon from '@material-ui/icons/YouTube';
import InstagramIcon from '@material-ui/icons/Instagram';
import {
  Container,
  CssBaseline,
  makeStyles,
  Card,
  Avatar,
  CardContent,
  Typography
} from "@material-ui/core";
import { getProfileById } from "../../actions/profile";

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  card: {
    // marginTop: 20,
    height: "100%",
    width: '100%',
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    paddingLeft: "25vw",
    paddingRight: "25vw",
    paddingBottom: "6.5vh"
  },
  cardContent: {
    flexGrow: 1
  },
  avatar: {
    width: theme.spacing(25),
    height: theme.spacing(25),
    marginTop: "3vh"
  }, 
  editButton: {
    marginTop: "1.5vh"
  }, 
  motto: {
    marginTop: 10,
    textAlign: 'center'
  }, 
  firstName: {
    textAlign: 'center'
  }, 
  goalsCompleted: {
    textAlign: 'center'
  }, 
  location: {
    textAlign: 'center'
  },
  socialMedias: {
    display: 'flex', 
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center'
  }
}));

const Profile = ({
  match,
  getProfileById,
  profile: { profile, loading }
}) => {
  const classes = useStyles();

  useEffect(() => {
    getProfileById(match.params.id);

  }, [getProfileById, match.params.id]);

  return (
    <>
      {profile === null || loading ? (
        <>
          <Navbar />
          <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
              <Spinner />
            </div>
          </Container>
        </>
      ) : (

        // The loaded profile will go here

        <>
          <Navbar />
          <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>

              <Card className={classes.card}>
                <Avatar
                  alt="Profile Image"
                  src={profile.user.avatar}
                  className={classes.avatar}
                />
                <Container className={classes.socialMedias}>
                <TwitterIcon/>
                    <FacebookIcon/>
                    <YouTubeIcon/>
                    <InstagramIcon/>
                  </Container>
                <CardContent className={classes.cardContent}>
                <Typography className={classes.firstName} noWrap gutterBottom variant="h3" component="h2">
                    {profile.user.first_name}'s Profile
                  </Typography>

                  <Typography className={classes.goalsCompleted} noWrap gutterBottom variant="h4" component="h2">
                    Goals completed {profile.goalsCompleted}
                  </Typography>
                  <Typography className={classes.location} noWrap gutterBottom variant="h6" component="h2">
                    {profile.location}
                  </Typography>
                  <Typography className={classes.motto}>{profile.aboutme}</Typography>


                </CardContent>
              </Card>
            </div>

          </Container>

        </>
      )}
    </>
  );
};

Profile.propTypes = {
  getProfileById: PropTypes.func,
  profile: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile,
  auth: state.auth
});

export default connect(mapStateToProps, { getProfileById })(Profile);

Answer 1

解决方案是让 JSS 如此

socialMedias: {
   display: 'flex'
  }

而是将图标包裹在 div 中，如下所示：

<div className={classes.socialMedias}>
    <TwitterIcon />
    <FacebookIcon />
    <YouTubeIcon />
    <InstagramIcon />
</div>

在 Avatar 组件下方居中社交媒体图标

Centering social media icons underneath Avatar component

javascript

reactjs

material-ui

jss