MaterialUI/CSS创建此框

我试图用MaterialUI制作这个组件：

我怎么做这个？我正在尝试使用卡组件，但似乎：

这是我的制作风格：

  const useStyles = makeStyles(() => ({
    cardHeader: {
      color: "white",
      borderRadius: "0"
    },
    cardDescription: {
      display: "flex",
      justifyContent: "center",
      alignItems: "baseline",
      backgroundColor: "#315059",
      color: "cyan"
    },
  }));

  const classes = useStyles();

这是我的卡片组件：

<Card style={{borderRadius: "0"}}>
          <CardHeader
            title="VELOCIDAD MEDIA"
            titleTypographyProps={{ align: "center" }}
            subheaderTypographyProps={{ align: "center" }}
            className={classes.cardHeader}
            style={{backgroundColor:"#f92f3b"}}
          />
          <CardContent style={{backgroundColor:"#f92f3b"}}>
            <div className={classes.cardDescription}>
              <Typography component="h2" variant="h3" color="cyan" >
                262
              </Typography>
              <Typography variant="h6" color="white">
                KM/H
              </Typography>
            </div>
          </CardContent>
        </Card>

262
公里/小时

您为sh*tty框和屏幕截图指定的代码不匹配。也许项目的其他风格会干扰它。但是，我做了一些修改，使其看起来与所需的屏幕截图相似

注意：-字体和卡片尺寸取决于用例

从“@material ui/core”导入{Card、CardContent、CardHeader、makeStyles、排版}；
从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
const classes=useStyles（）；
返回(
262
公里/小时
);
}
const useStyles=makeStyles（（）=>({
卡片头：{
颜色：“白色”，
边界半径：“0”，
},
卡片说明：{
显示：“flex”，
辩护内容：“中心”，
对齐项目：“中心”，
背景颜色：“315059”，
颜色：“青色”，
高度：'150px'
},
}));

您为sh*tty框和屏幕截图指定的代码不匹配。也许项目的其他风格会干扰它。但是，我做了一些修改，使其看起来与所需的屏幕截图相似

注意：-字体和卡片尺寸取决于用例

从“@material ui/core”导入{Card、CardContent、CardHeader、makeStyles、排版}；
从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
const classes=useStyles（）；
返回(
262
公里/小时
);
}
const useStyles=makeStyles（（）=>({
卡片头：{
颜色：“白色”，
边界半径：“0”，
},
卡片说明：{
显示：“flex”，
辩护内容：“中心”，
对齐项目：“中心”，
背景颜色：“315059”，
颜色：“青色”，
高度：'150px'
},
}));

这甚至不是材料设计，而是样式化的内容。请发布您使用和尝试过的任何代码，以便我们可以从中开始（我们不是免费获取解决方案的服务）。但这在CSS中比在中拖动无关的材质设计更容易实现。@somethinghereedit！这甚至不是材料设计，只是风格化的内容。请发布您使用和尝试过的任何代码，以便我们可以从中开始（我们不是免费获取解决方案的服务）。但这在CSS中比在中拖动无关的材质设计更容易实现。@somethinghereedit！

import { Card, CardContent, CardHeader, makeStyles, Typography } from "@material-ui/core";
import React from "react";
import "./styles.css";

export default function App() {
  const classes = useStyles();
  return (
    <div>
      <Card style={{borderRadius: "0",width:'380px'}}>
          <CardHeader
            title="VELOCIDAD MEDIA"
            titleTypographyProps={{ align: "center" }}
            subheaderTypographyProps={{ align: "center" }}
            className={classes.cardHeader}
            style={{backgroundColor:"#f92f3b"}}
          />
          <CardContent style={{backgroundColor:"#f92f3b",padding:'8px'}}>
            <div className={classes.cardDescription}>
              <Typography component="h2" variant="h3" color="cyan" >
                262
              </Typography>
              <Typography variant="h6" style={{marginLeft:'15px', color:'#fff'}} color="white">
                KM/H
              </Typography>
            </div>
          </CardContent>
        </Card>
    </div>
  );
}


const useStyles = makeStyles(() => ({
  cardHeader: {
    color: "white",
    borderRadius: "0",
  },
  cardDescription: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#315059",
    color: "cyan",
    height:'150px'
  },
}));