Блог

Главная - Вопросы по программированию - MaterialUI / CSS создает это поле

MaterialUI / CSS создает это поле

#css #reactjs #material-ui

#css #reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь создать этот компонент с помощью MaterialUI: original box

Как я могу это сделать? Я пытаюсь использовать компонент card, но, похоже,:

дерьмовый ящик

Это мои макеты:

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

  const classes = useStyles();

И это мой компонент card:

 <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>

Комментарии:

1. Это даже не material design, это просто стилизованный контент. Пожалуйста, опубликуйте любой код, который вы использовали и пробовали, чтобы нам было с чего начать (мы не бесплатный сервис для получения решения). Но этого будет легче достичь в CSS, чем перетаскивать несвязанный material design.

2. @somethinghere редактировать!

Ответ №1:

ваш приведенный код для дерьмового поля и скриншота не соответствует. Возможно, другие стили проекта мешают этому. Тем не менее, я внес некоторые изменения, чтобы выглядеть похожим на требуемый снимок экрана.

Примечание: — Шрифты и размеры карты зависят от варианта использования.

 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'
  },
}));