如何解决如何修复成块的文本？如何修复背景不会一直下降？ 简答：更长的答案：
在此代码中，我在侧边栏一侧的文本不会聚集在一起。我该如何解决？另外，如何将侧边栏的背景一直扩展到它与页脚相交的点，就像区域 main 那样。整个页面是在 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,{ 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",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;
解决方法
简答：
如何修复成块的文本？
了解 CSS flexbox 的行为，并在您的应用中更好地控制它。使用 flex={false} 解决了您的文本堆积问题。
如何修复背景不完全下降
此行为导致在您的网格中设置硬编码行高。因此 rows={["xlarge"]} 导致了这种行为，将其更改为 rows="auto" 解决了问题，现在此网格单元格内的所有内容都包含在背景中。
更长的答案：
无论这两个修复程序如何，我都无法全面了解您的问题，因为您的代码包含许多其他组件和样式表，这些组件和样式表不属于您共享的代码的一部分。我了解到您可能需要花一些时间修复的几件事是：
- 详细了解标题级别和大小以获得更好的辅助功能支持，我使用您共享的代码修复了该领域的一些问题，但可能需要更多关注。
- 在添加
flex={false}以避免文本聚集后，padsetter 是多余的，因此您可以通过删除pad道具轻松清理它们。 - 对于干净的 grommet 应用，您实际上不应该使用样式表，我建议您学习如何利用主题功能。
- 不要使用多个 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,{ 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"));
将此代码复制/粘贴到 this template，它应该会按预期工作。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
