在 React-Responsive UI 中使用 Order 属性

Question

我正在学习响应式 UI。我想要的是当屏幕尺寸达到sm={6} 时，<div> 的顺序应该更改。我使用 order 尝试过，但它没有用。下面是我的代码

import React from 'react';
import Container from '@material-ui/core/Container';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';

export const useStyles = makeStyles((theme) => ({
  item1: {
    order: 1,
    [theme.breakpoints.down('sm')]: {
      order: 2,
    },
  },
  item2: {
    order: 2,
    [theme.breakpoints.down('sm')]: {
      order: 1,
    },
  },
}));

export default function App() {
  const dataSource = [
    {
      name: 'HSA Bank',
      cardTitle: 'Medical FSA Plan',
      title: 'General Purpose Flexible Spending Accounts(FSA)',
      cdes1: 'Annual Max Contribution',
      cdes2: 'Use it or Lose it policy (Grace period)',
      des1:
        "A Flexible Spending Account can be used to pay for qualified out-of-pocket health care costs. Because money you contribute to your FSA isn't taxed, you can reduce your overall healthcare expenses. Typically, you must use all money in an FSA within your employer's plan year (known ass 'use it or lose it'). Some employers offer a 2.5 month grace period or allow you to rollover up to $500.",
      des2: 'The 2020 IRS contribution limit is $2,750.',
    },
    {
      name: 'Health Net',
      cardTitle: 'Dependent Care FSA Plan',
      title: 'Dependent care FSA(DCFSA)',
      cdes1: 'Max individual Contributor for Married but filling as seperately',
      cdes2: 'Max Married Contribution for Filling Joinly or Single Parent As Head',
      cdes3: 'Use it or Lose it policy (Grace period)',
      des1:
        'A Dependent Care Flexible Spending Account is a pre-tax benefit account used to pay for eligible dependent care services such as preschool, summer day camp, before/after school programs, and child or elder care.2020 IRS contribution limit: $2,500 if married and filing seperately; $5,000 if married and filing jointly or filing as a single/head of household.',
      des2:
        'DCFSA annual contribution limits always align with the calender year (which may or may not align with your plan year). NOTE: when filing jointly, the IRS requires both spouses have W-2 earned income during the year',
    },
  ];

  const classes = useStyles();

  const description = dataSource.map((item) => {
    return (
      <Grid container spacing={3} style={{ backgroundColor: 'ash', paddingBottom: 100 }}>
        <Grid container direction="column" xs={12} sm={6} md={4} className={classes.item1}>
          <div>
            <Card>
              <CardContent>
                <h1>{item.name}</h1>
                <h3>{item.cardTitle}</h3>
              </CardContent>
            </Card>
          </div>
        </Grid>
        <Grid container direction="column" xs={12} sm={6} md={8}>
          <div style={{ backgroundColor: 'blue', paddingLeft: 50 }}>Test</div>
        </Grid>
      </Grid>
    );
  });

  return (
    <React.Fragment>
      <Container maxWidth="lg" style={{ paddingTop: 50 }}>
        {description}
      </Container>
    </React.Fragment>
  );
}

Answer 1

您忘记在第二个网格标签中添加 item2 类

<Grid container direction="column" xs={12} sm={6} md={8} className={classes.item2}>