在这段代码中，我在侧边栏上的文本不会聚集在一起。我该如何解决？另外，我怎样才能将侧边栏的背景一直延伸到它与页脚相交的点，就像区域主干一样。整个页面设置在 Grommet 的网格中。我尝试使用代码中显示的填充和边距，但它仍然不起作用。我还尝试了 CSS 中的一些功能，但仍然无法正常工作。
import React from "react";
import { Grommet, Box, Grid, Heading, Paragraph, List, Text, Button, Form, FormField, TextInput } from "grommet";
import { Gremlin, LocationPin, FormNext, DocumentText } from "grommet-icons";
import { custom } from "grommet/themes";
import { deepMerge } from "grommet/utils";
import "./Purpleheader.css";
import "./TechnicalScholarshipApp.css";
import { Simple } from "./StatesForm";
import { Household } from "./Household";
import { Phone } from "./PhoneForm";
import { MainFooter } from "../Footer/Footer";
const data = [
{ text: "You are a graduating senior from Stranahan High School" },
{
text:
"You will attend a certified educational institution this fall, with a definite one or two year goal in mind. For example, x-ray tech, beautician, welder, etc. ",
},
{ text: "You have completed the application and the attached the following:" },
];
const data2 = [
{ text2: "A copy of your Stranahan transcript, including the first semester of your senior year." },
{ text2: "Two letters of recommendation. One from an educator, one from a mentor, employer, or community member." },
{ text2: "A copy of your Federal Financial Aid form." },
{ text2: "A copy of your Stranahan transcript, including the first semester of your senior year." },
{ text2: "A short essay that addresses one of the following:" },
];
const data3 = [
{ text3: "One major accomplishment I have achieved and why it was important." },
{ text3: "One major obstacle in my life and how I overcame it." },
{ text3: "What impact my education at Stranahan has had on me." },
];
const data4 = [
{
text4:
"These completed materials must be submitted in an envelope or organized folder to Ms. Lewis no later than Friday, March 3rd.",
},
];
const customTheme = deepMerge(custom, {
formField: {
label: {
requiredIndicator: true,
},
},
});
const TechnicalScholarshipApp = () => (
<Grommet themes={custom}>
<Box>
<Grid className="PurpleHeader" rows={["xxsmall"]} areas={[["header"]]} gap="small">
<Box background="brand" gridArea="header">
<h2>Technical/Vacational Scholarship Application </h2>
</Box>
</Grid>
<Box className="bodypage">
<Grid rows={["xlarge"]} columns={["1/2", "1/2"]} areas={[["sidebar", "main", "footer", "footer"]]}>
<Box background="light-5" gridArea="sidebar">
<Box pad={{ top: "medium", bottom: "large" }}>
<Heading textAlign="center">Stranahan Education Endowment Foundation</Heading>
</Box>
<Box pad={{ top: "large", left: "large" }}>
<Heading textAlign="center" size="small">
One or Two Year Scholarship Application
</Heading>
</Box>
<Box align="center" pad={{ bottom: "xlarge", top: "large" }}>
<Paragraph textAlign="center" size="large">
This form is for a five hundred dollar grant toward a technical, vocational or medical
career. Your application cannot be considered unless the following requirements are met:
</Paragraph>
</Box>
<Box pad={{ bottom: "xlarge", left: "small" }} align="center">
<List data={data} border={false}>
{(datum) => (
<Box direction="row-responsive" gap="medium" align="center">
<LocationPin size="large" />
<Text weight="bold">{datum.text}</Text>
</Box>
)}
</List>
</Box>
<Box pad={{ top: "xlarge", left: "large", right: "xlarge", bottom: "xlarge" }} align="center">
<List data={data2} pad="medium" border={false}>
{(datum) => (
<Box direction="row-responsive" gap="medium" align="center">
<FormNext size="large" />
<Text weight="bold">{datum.text2}</Text>
</Box>
)}
</List>
</Box>
<Box
pad={{ top: "xlarge", left: "medium", top: "xlarge", bottom: "xlarge" }}
align="center"
margin={{ top: "xlarge" }}
>
<List data={data3} pad="medium" border={false}>
{(datum) => (
<Box direction="row-responsive" gap="medium" align="center">
<DocumentText size="large" />
<Text weight="bold">{datum.text3}</Text>
</Box>
)}
</List>
</Box>
<Box
pad={{ top: "xlarge", left: "large", right: "xlarge" }}
align="center"
margin={{ top: "xlarge" }}
>
<List data={data4} pad="medium" border={false}>
{(datum) => (
<Box direction="row-responsive" gap="medium" align="center">
<FormNext size="large" />
<Text weight="bold">{datum.text4}</Text>
</Box>
)}
</List>
</Box>
</Box>
<Grommet theme={custom}>
<Box background="light-2" gridArea="main" className="mainForm">
<Box align="center" pad="large">
<Heading textAlign="center" size="small">
One or Two Year Scholarship Application
</Heading>
</Box>
<Box align="center" pad="large">
<Form>
<FormField name="firstName" htmlFor="firstName" label="First Name" required>
<TextInput id="firstName" name="firstName" />
</FormField>
<FormField name="lastName" htmlFor="lastName" label="Last Name" required>
<TextInput id="lastName" name="lastName" />
</FormField>
<FormField
name="streetAddress"
htmlFor="streetAddress"
label="Street Address"
required
>
<TextInput id="streetAddress" name="streetAddress" />
</FormField>
<FormField name="addressLine2" htmlFor="addressLine2" label="Address Line 2">
<TextInput id="addressLine2" name="addressLine2" />
</FormField>
<FormField name="city" htmlFor="city" label="City" required>
<TextInput id="city" name="city" />
</FormField>
<Box>
<FormField name="zipCode" htmlFor="zipCode" label="Zip Code" required>
<TextInput id="zipCode" name="zipCode" />
</FormField>
</Box>
<Simple />
<Phone />
<FormField name="email" htmlFor="email" label="Email" required>
<TextInput id="email" name="email" type="email" />
</FormField>
<Household />
<FormField
name="mothersOccupation"
htmlFor="mothersOccupaton"
label="Mothers Occupation"
>
<TextInput id="mothersOccupation" name="mothersOccupation" />
</FormField>
<FormField
name="fathersOccupation"
htmlFor="fathersOccupaton"
label="Fathers Occupation"
>
<TextInput id="fathersOccupation" name="fathersOccupation" />
</FormField>
<Button type="submit" label="Submit" primary />
<Text margin={{ left: "small" }} size="small" color="status-critical">
* Required Field
</Text>
</Form>
<Box gridArea="footer" pad={{ top: "large" }}>
<MainFooter />
</Box>
</Box>
</Box>
</Grommet>
</Grid>
</Box>
</Box>
</Grommet>
);
export default TechnicalScholarshipApp;