React/Material-UIでCard

10019 ワード
React material-ui React テキストリンク
./src/App.js
import logo from "./logo.svg";
import "./App.css";
import { Card, CardContent, Grid, Typography } from "@material-ui/core";
import LocalHospitalIcon from "@material-ui/icons/LocalHospital";
import CloseIcon from "@material-ui/icons/Close";
import DirectionsRunIcon from "@material-ui/icons/DirectionsRun";
import FavoriteIcon from "@material-ui/icons/Favorite";

function App() {
  return (
    <div>
      <Grid container spacing={1}>
        <Grid item xs={3} color="primary">
          <Card style={{ backgroundColor: "#0095d9" }}>
            <CardContent>
              <Typography variant="h5">622,273</Typography>
              <Typography>
                <LocalHospitalIcon />
                Confirmed
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={3}>
          <Card style={{ backgroundColor: "#e60033" }}>
            <CardContent>
              <Typography variant="h5">10,566</Typography>
              <Typography>
                <CloseIcon />
                Deaths
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={3}>
          <Card style={{ backgroundColor: "#3eb370" }}>
            <CardContent>
              <Typography variant="h5">542,413</Typography>
              <Typography>
                <DirectionsRunIcon />
                Recovered
              </Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={3}>
          <Card style={{ backgroundColor: "#ffd900" }}>
            <CardContent>
              <Typography variant="h5">69,294</Typography>
              <Typography>
                <FavoriteIcon />
                Active
              </Typography>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </div>
  );
}

export default App;