React Material-UI不能证明内容不适用于我的所有卡

Question

我的代码确实有一个奇怪的问题。我正在使用React将Redux状态映射到Material-UI卡上。前几天，当我在卡片上测试不同的样式时，我可以进行不同的分类并更新卡片外观，但是我喜欢。但是，今天当我向数据库中添加新信息时，新卡将不会采用Material-UI数据库中的所有样式。具体来说，新卡似乎不受justifyContent的影响。

这是我很难解释的问题，但是基本上我有一个信息数据库，被映射到多个不同的卡上。有些卡接受Material-UI样式，而其他卡则不接受。

我想发布一个jsfiddle，但是我需要将其链接到我的数据库，但我不确定是否可以这样做。

这是映射我的redux状态的页面：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ProjectItem from '../ProjectItem/ProjectItem'
import {withRouter} from 'react-router-dom'
import Header from '../Header/Header'
import { withStyles } from '@material-ui/core';

const mapReduxStateToProps = (reduxState) => ({reduxState});

const styles = theme => ({
    bodyContent: {
        marginTop: 100,
    }
})

class ProjectPage extends Component {

    //This calls the getProjects function on the page load
    componentDidMount() {
        this.getProjects();
    }

    //This function dispatches an action to our index page
    getProjects = () => {
        console.log('running')
        this.props.dispatch({ type: 'GET_PROJECT'})
    }

  render() {
    const {classes} = this.props
    return (
      <div>
          <Header />
          <div className= {classes.bodyContent}>
        {this.props.reduxState.projects.map((project,index) => {
            return(

                <ProjectItem 
                    key = {index}
                    id = {project.id}
                    name ={project.name}
                    description = {project.description}
                    thumbnail = {project.thumbnail}
                    website = {project.website}
                    github = {project.github}
                    tag_id = {project.tag_id}
                />

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

export default withRouter(connect(mapReduxStateToProps)(withStyles(styles)(ProjectPage)));

这是我样式的页面。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './ProjectItem.css'
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia'
import CardContent from '@material-ui/core/CardContent'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core';

const mapReduxStateToProps = (reduxState) => ({reduxState});

const styles = theme => ({
    card: {
        display: 'flex',
        width: 550,
        alignSelf: 'center',
        height: 150,
        paddingTop: 5,
        paddingBottom:5,

    },
    details: {
        display: 'flex',
        flexDirection: 'column'
    },
    thumbnail: {
        height: 150,
        minWidth: 150
    },
    contentBody: {
        justifyContent: 'space-between',
        textAlign: 'left',
        alignItems: 'center',
        display : 'inline-flex',
    },
    toolbar: theme.mixins.toolbar
})
class ProjectItem extends Component {



  render() {
      const {classes} = this.props
    return (
        <div className='container'>
          <Card className={classes.card}>
              <CardMedia
                  className={classes.thumbnail}
                  image={this.props.thumbnail}
                  title="Project Image"
              />
              <div className={classes.details}>
                  <CardContent className={classes.contentBody}>
                      <Typography variant='h5'>
                        {this.props.name} 
                      </Typography>
                      <Typography variant='h6'>
                        <a href={this.props.github}>GitHub</a>  
                      </Typography>
                      <Typography variant='h6'>
                        <a href={this.props.website}>Website</a>
                      </Typography>
                      <Typography variant='h6'>
                        {this.props.tag_id}
                      </Typography>
                  </CardContent>
                  <CardContent className={classes.content}>    
                      <Typography>
                          {this.props.description}
                      </Typography>
                  </CardContent>
              </div>
          </Card>
          </div>
    );
  }
}

export default connect(mapReduxStateToProps)(withStyles(styles)(ProjectItem));