文本不会填充在React Grid中

Question

我正在尝试使用Grid创建4个react面板，以展示我在Portfolio应用程序中的技能。我的文本工作得很好，但一旦我试图从材料UI实现自定义的纸网格，文本就会以某种方式被覆盖，我不知道为什么。这是我声明自定义网格的代码：

import React from "react";
import { makeStyles} from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
color:'green',
},
paper: {
height: 150,
width: 100
},

}));
const SpacingGrid = () => {
const [spacing] = React.useState(2);
const classes = useStyles();
return (
<theme>
<Grid container className={classes.root} spacing={2}>
<Grid item xs={12}>
<Grid container justify="center" spacing={spacing}>
<Paper className={classes.paper} />
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Paper className={classes.control}>
<Grid container>
<Grid item></Grid>
</Grid>
</Paper>
</Grid>
</theme>
);
};
export default SpacingGrid;

这是我的代码，我在这里调用网格并使用它来实现我的技能：

import React from 'react'
import Panel from '../accessories/Panels'
import SpacingGrid from '../accessories/Grid'
const frontEnd =['Django','Reactjs','Javascript','HTML','CSS']
const backEnd =['Python','Typescript','Nodejs','Express']
const databases =['MongoDB','MySQL']
const tools = ['AWS','AWS-CDK','Docker','AWS-Lambda','Figma','Microservices','Kubernetes']

//I should probably make my own styled components for this but NEED to learn how
const Skills = () =>{
return(
<div>
<h1 color="whitePrimary" align="center">
Skills
</h1>
<SpacingGrid>
<Panel flexWidth="25" padding="1" rounded>
<h1 color="whitePrimary" align="center">
Front-End
</h1>
<p color="whitePrimary" align="center">
</p>
{frontEnd.map((item) =>(
<p color="textPrimary" align="center" key={item}>
{item}
</p>
))}
</Panel>
<Panel flexWidth="31" padding="1" rounded>
<h1 color="whitePrimary" align="center">
Back-End
</h1>
<p color="whitePrimary" align="center">
</p>
{backEnd.map((item) => (
<p color="textPrimary" align="center" key={item}>
{item}
</p>
))}
</Panel>
<Panel flexWidth="31" padding="1" rounded>
<h1 color="whitePrimary" align="center">
Databases:
</h1>
<p color="whitePrimary" align="center">
</p>
{databases.map(((item) =>(
<p color="textPrimary" align="center" key={item}>
{item}
</p>
)))}
</Panel>

<Panel flexWidth="31" padding="1" rounded>
<h1 color="whitePrimary" align="center">
General Tooling:
</h1>
<p color="whitePrimary" align="center">
</p>
{tools.map((item => (
<p color="textPrimary" align="center" key={item}>
{item}

</p>
)))}
</Panel>
</SpacingGrid>
</div>
)
}

export default Skills;

这是我的App.js，我的文件是所有组件所在的：

import {React, Suspense} from 'react'
import SocialFooter from '../components/SocialMediaFooter'
import Header from '../components/Header'
import Skills from '../components/SkillsPanels'

const Main = () =>{
return(
<div>
<Suspense fallback={<div>Loading...</div>}>
<Header />

</Suspense>
<Suspense fallback={<div>Loading...</div>}>
<Skills />
</Suspense>
<Suspense fallback={<div>Loading... </div>}>
<SocialFooter />
</Suspense>
</div>
)}

//add all react components here and export to app.js

export default Main;

我的问题是，我认为错误在Grid.js文件中。现在代码工作了，但它并没有像我在SkillsPanels.js中那样将文本添加到应用程序中，它只是给了我空白的网格，这让我很困惑。谢谢大家！

Answer 1

我在SpacingGrid函数中传递了props，然后调用旁边的｛props.children｝