Центрирование компонента Аватара внутри компонента Карты - PullRequest
Новая
       8

Центрирование компонента Аватара внутри компонента Карты

1 голос
/ 11 января 2020

Добрый день,

Я пытаюсь центрировать мои <Avatar> компоненты, используя Material UI с React внутри <Card> компонентов. Каков наилучший способ сделать это? Это очень забито смотреть на данный момент.

Я попытался настроить класс аватара для отображения flex и justifyContent для центра, но это не оказалось успешным.

Card components

Это код для всей страницы, которая включает компоненты пользовательского интерфейса материалов, которые я использую. 

import React, { useEffect } from "react";
import Spinner from "../components/layout/Spinner";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getProfiles } from "../actions/profile";
import Navbar from "../components/dashboard/Navbar";
import {
  Card,
  CardActions,
  CardContent,
  CssBaseline,
  Grid,
  Typography,
  Button,
  makeStyles,
  Container,
  Avatar
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  cardGrid: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4)
  },
  card: {
    height: "100%",
    display: "flex",
    flexDirection: "column"
  },
  cardContent: {
    flexGrow: 1
  },
  profileHeader: {
    textAlign: "center"
  },
  avatar: {
    width: theme.spacing(7),
    height: theme.spacing(7)
  }
}));

const Profiles = ({ getProfiles, profile: { profiles, loading } }) => {
  const classes = useStyles();

  useEffect(() => {
    getProfiles();
  }, [getProfiles]);

  return (
    <>
      {loading ? (
        <Spinner />
      ) : (
        <React.Fragment>
          <CssBaseline />
          <Navbar />
          <main>
            <Container className={classes.cardGrid} maxWidth="md">
              <Typography className={classes.profileHeader} variant="h2">
                Profiles
              </Typography>
              <Grid container spacing={4}>
                {profiles.map(profile => (
                  <Grid item key={profile._id} xs={12} sm={6} md={4}>
                    <Card className={classes.card}>
                      <Avatar
                        alt="Profile Image"
                        src={profile.user.avatar}
                        className={classes.avatar}
                      />
                      <CardContent className={classes.cardContent}>
                        <Typography gutterBottom variant="h5" component="h2">
                          Goals completed {profile.goalsCompleted}
                        </Typography>
                        <Typography>{profile.aboutme}</Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" color="primary">
                          View
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                ))}
              </Grid>
            </Container>
          </main>
        </React.Fragment>
      )}
    </>
  );
};

Profiles.propTypes = {
  getProfiles: PropTypes.func.isRequired
};

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

export default connect(mapStateToProps, { getProfiles })(Profiles);

1 Ответ

1 голос
/ 11 января 2020

Первый вариант, если вы хотите переместить весь контент в центр, затем необходимо применить alignItems: 'center' к card вместо avatar, например, так: 

card: {
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center'
},

Это приведет к перемещению все содержимое центрируется внутри компонента <Card>.

Второе - создать <Container> вокруг <Avatar>, как показано ниже: 

<Card className={classes.card}>
   <Container className={classes.center}>
      <Avatar alt="Profile Image"
              src={'#'}
              className={classes.avatar} />
   </Container>
   { /* rest of the code */ }
</Card>

Затем примените следующее стиль: 

center: {
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
}

Результат от второго возможного решения:

profile

Если вы спросите меня, я бы go с второй вариант, который выглядит лучше.

Надеюсь, это поможет!

...