如何修复结块的文本？如何修复背景不会一直向下？

Question

在这段代码中，我在侧边栏的文本不会聚集在一起。我怎么才能修复它呢？另外，我如何才能像area 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, 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. 了解更多有关标题级别和大小的信息以获得更好的辅助功能支持，我使用您共享的代码修复了该区域中的一些问题，但可能需要添加更多的flex={false}以避免出现文本块，pad设置程序是多余的，因此您可以通过删除pad属性来轻松清理这些设置。
2. 如果有一个干净的pad应用程序，您实际上不应该使用样式表，我建议学习如何利用主题的强大功能使用多个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"));

将此代码复制/粘贴到this template，它应该会按预期工作。