如何为包含xs = {12}布局全宽度的材料ui网格项编写xs，sm，md和lg？

Question

我的目标是在xs, sm, md, lg中为Card显示写入相同的全角。有人可以帮我这个查询吗？

这是我的代码：

import {
  Grid,
  Card,
  CardHeader,
  Avatar,
  IconButton,
  CardContent,
  Typography
} from "@material-ui/core";

import React from "react";
import "./styles.css";
import MoreVertIcon from "@material-ui/icons/MoreVert";

class App extends React.Component {
  render() {
    return (
      <Grid container spacing={1}>
        <Grid item xs={12}>
          <Card>
            <CardHeader
              avatar={<Avatar aria-label="recipe">R</Avatar>}
              action={
                <IconButton aria-label="settings">
                  <MoreVertIcon />
                </IconButton>
              }
              title="Shrimp and Chorizo Paella"
              subheader="September 14, 2016"
            />
            <CardContent>
              <Typography variant="body2" color="textSecondary" component="p">
                This impressive paella is a perfect party dish and a fun meal to
                cook together with your guests. Add 1 cup of frozen peas along
                with the mussels, if you like.
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    );
  }
}
export default App;

Here is the Code Sandbox sample