React - Material UI 网格和 useStyles 道具问题

Question

第一次真正玩转materialUI。我制作了卡片网格并在同一组件中整理了大部分样式，因此我想将所有 useStyles 样式移动到样式文件中。

在弄清楚如何操作之后，在重新加载时我可以看到没有任何组件的 backgroundColor 样式正在渲染，但其他一切都是。

backgroundColor 在同一个文件中时渲染得很好，奇怪的是，如果我删除一个颜色实例并重新添加它，它会渲染一次（其他未删除的 backgroundColours 渲染得很好，我的意思是）重新载入，又没了

请在此方面提供一些帮助！

GridStyles.js

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles({
  root: {
    flexGrow: 1,
    marginLeft: '15rem',
    marginRight: '15rem',
    wordBreak: 'break-all',
    whiteSpace: 'unset'
  },
  containerCard: {
    border: 'solid 3px black',
    marginRight: '2rem',
    marginLeft: '2rem',
    marginTop: '3rem',
    marginBottom: '5rem',
    borderRadius: '8px',
    borderLeftStyle: 'dashed',
    borderRightStyle: 'dashed',
    
  },
  topCard: {
    backgroundColor: '#53E9B2',
    border: 'none',
    boxShadow: 'none',
    paddingBottom: '7rem',
    position: 'relative'
  },
  topCardText: {
    position: 'absolute',
    bottom: 0,
    padding: 0,
    marginLeft: '2rem'
  },
  middleCard: {
    border: 'solid 2px black',
    borderLeftStyle: 'dashed',
    borderRightStyle: 'dashed',
    backgroundColor: '#53E9B2',
    marginRight: '2rem',
    marginLeft: '2rem',
    marginTop: '1em',
    marginBottom: '3rem',
    borderRadius: '8px'
  },
  middleCardText: {
    whiteSpace: 'pre-wrap',
    color: 'white'
  },
  bottomCard: {
    backgroundColor: '#53E9B2',
    border: 'none',
    boxShadow: 'none',
    paddingBottom: '1rem'
  },
  bottomCardText: {
    color: 'white',
    padding: 0,
        marginLeft: '2rem'
      }
    })

export default useStyles

Grid.js

import React from 'react'
import useStyles from './GridStyles'
import {
  Grid,
  Card,
  CardHeader
} from '@material-ui/core/'

const CardGrid = (props) => {
  const classes = useStyles(props);

  return (
    <div className={classes.root}>
      <Grid
        container
        spacing={0}
        direction='row'
        justifyContent='flex-start'
        alignItems='flex-start'
      >
        {props.cardData.map(elem => (
          <Grid
            item
            xs={4}
            sm={4}
            md={4}
            xl={4}
            key={props.cardData.indexOf(elem)}
          >
            <Card className={classes.containerCard}>
              <Card className={classes.topCard}>
                <CardHeader className={classes.topCardText} title={elem.name} />
              </Card>
              <Card className={classes.middleCard}>
                <CardHeader
                  className={classes.middleCardText}
                  title={`Company Name:\n${elem.company.name}`}
                />
                <CardHeader
                  className={classes.middleCardText}
                  title={`Company Catchphrase:\n${elem.company.catchPhrase}`}
                />
                <CardHeader
                  className={classes.middleCardText}
                  title={`Company Bs:\n${elem.company.bs}`}
                />
              </Card>
              <Card className={classes.bottomCard}>
                <CardHeader
                  className={classes.bottomCardText}
                  title={`Phone: ${elem.phone}`}
                />
                <CardHeader
                  className={classes.bottomCardText}
                  title={`Email: ${elem.email}`}
                />
                <CardHeader
                  className={classes.bottomCardText}
                  title={`Website: ${elem.website}`}
                />
              </Card>
            </Card>
          </Grid>
        ))}
      </Grid>
    </div>
  )
}

export default CardGrid

Answer 1

这个问题的公认答案 link 解决了我的问题。将 GridStyles 页面转换为一个包含样式的常量，仅此而已，箭头函数使用 makeStyles() 函数引用调用此文件并且它起作用了。

React - Material UI 网格和 useStyles 道具问题

React - Material UI Grid and useStyles prop issues

reactjs

material-ui