如何修复堆积的文本?如何修复背景不会一直向下

Question

在这段代码中，侧边栏上的文本不会聚集在一起。我该怎么解决？此外，我如何将侧边栏的背景一直扩展到它与页脚相遇的位置，就像区域主体一样。整个页面是在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;

Answer 1

简短回答：

如何修复结块的文本？

了解CSS flexbox的行为，并在应用程序上更好地控制它。flex={false}的使用解决了您堆积的文本。

如何修复背景不会一直向下

此行为导致在网格中设置硬编码的行高度。所以rows={["xlarge"]}导致了这种行为，将其更改为rows="auto"解决了这个问题，现在这个网格单元内的所有内容都包含在后台。

更长的答案：

不管这两个修复，我都无法全面了解您的问题，因为您的代码包括许多其他组件和样式表，这些组件和样式单不是您共享的代码的一部分。我了解到的一些你可能想投入一些时间固定的东西是：

1. 了解更多关于标题级别和大小的信息以获得更好的可访问性支持，我用您共享的代码修复了该领域的一些问题，但可能需要更多关注
2. 在添加flex={false}以避免文本聚集后，padsetter是多余的，因此您可以通过删除pad道具来轻松清理这些setter
3. 有了一个干净的索环应用程序，你就不应该真正使用样式表，我建议你学习如何利用主题的力量
4. 不要使用多个Grommet组件来切换主题，而是尝试使用ThemeContext

这里有一个快速的清理代码片段，可以解决您的问题(尽管我认为它需要更多的清理，但它也能达到您期望的效果(

import React from "react";
import { render } from "react-dom";
import {
Grommet,
Box,
Grid,
Heading,
Paragraph,
List,
Text,
Button,
Form,
FormField,
TextInput
} from "grommet";
import { LocationPin, FormNext, DocumentText } from "grommet-icons";
import { custom } from "grommet/themes";
import { deepMerge } from "grommet/utils";
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 App = () => (
<Grommet themes={customTheme} full style={{ height: "auto", width: "100%" }}>
<Box fill>
<Grid rows={["xsmall"]} areas={[["header"]]} gap="small">
<Box background="brand" gridArea="header">
<h2>Technical/Vacational Scholarship Application </h2>
</Box>
</Grid>
<Box className="bodypage" fill>
<Grid
rows="auto"
columns={["1/2", "1/2"]}
areas={[["sidebar", "main", "footer", "footer"]]}
>
<Box background="light-5" gridArea="sidebar" fill>
<Box flex={false}>
<Heading textAlign="center">
Stranahan Education Endowment Foundation
</Heading>
</Box>
<Box pad={{ top: "large", left: "large" }} flex={false}>
<Heading textAlign="center" level={2}>
One or Two Year Scholarship Application
</Heading>
</Box>
<Box align="center" flex={false}>
<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 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 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 align="center">
<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 align="center" margin={{ top: "xlarge" }}>
<List data={data4} border={false}>
{(datum) => (
<Box direction="row-responsive" gap="medium" align="center">
<FormNext size="large" />
<Text weight="bold">{datum.text4}</Text>
</Box>
)}
</List>
</Box>
</Box>
<Box background="light-2" gridArea="main" className="mainForm" fill>
<Box align="center">
<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>
<FormField name="email" htmlFor="email" label="Email" required>
<TextInput id="email" name="email" type="email" />
</FormField>
<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" }}></Box>
</Box>
</Box>
</Grid>
</Box>
</Box>
</Grommet>
);
render(<App />, document.getElementById("root"));

将此代码复制/粘贴到此模板，它应该可以按预期工作。