Поднимите заголовок карты в материалах и реагируйте на карты с css

Question

Я работаю над компонентом карты реакции материала для отображения таблиц данных. Как поднять заголовок карты, как показано на рисунке ниже * pi c. Для повышения заголовка карты используется казначейский пакет mui. Как я могу отобразить заголовок моей карты как в пи c с css.

Вот мой код:

import React from "react";
import "./styles.css";
import Cards from "./cards";
const columns = [
  { id: "name", label: "Name", minWidth: 170 },
  { id: "code", label: "ISO\u00a0Code", minWidth: 100 },
  {
    id: "population",
    label: "Population",
    minWidth: 170,
    align: "right",
    format: value => value.toLocaleString()
  },
  {
    id: "size",
    label: "Size\u00a0(km\u00b2)",
    minWidth: 170,
    align: "right",
    format: value => value.toLocaleString()
  },
  {
    id: "density",
    label: "Density",
    minWidth: 170,
    align: "right",
    format: value => value.toFixed(2)
  }
];

function createData(name, code, population, size) {
  const density = population / size;
  return { name, code, population, size, density };
}

const rows = [
  createData("India", "IN", 1324171354, 3287263),
  createData("China", "CN", 1403500365, 9596961),
  createData("Italy", "IT", 60483973, 301340),
  createData("United States", "US", 327167434, 9833520),
  createData("Canada", "CA", 37602103, 9984670),
  createData("Australia", "AU", 25475400, 7692024),
  createData("Germany", "DE", 83019200, 357578),
  createData("Ireland", "IE", 4857000, 70273),
  createData("Mexico", "MX", 126577691, 1972550),
  createData("Japan", "JP", 126317000, 377973),
  createData("France", "FR", 67022000, 640679),
  createData("United Kingdom", "GB", 67545757, 242495),
  createData("Russia", "RU", 146793744, 17098246),
  createData("Nigeria", "NG", 200962417, 923768),
  createData("Brazil", "BR", 210147125, 8515767)
];
export default function App() {
  return (
    <div className="App">
      <Cards
        dataRows={rows}
        columns={columns}
        title="Table Datas"
        headerProp="Datas are displayed in a table"
      />
    </div>
  );
}

, а также ссылка на мой код: https://codesandbox.io/s/cold-wood-f2gwg.

Мой текущий заголовок карты не приподнят и выглядит просто.

Answer 1

Добавьте этот стиль в ваш CSS файл:

.MuiCardHeader-root {
  width: 80%;
  margin: 0 auto;
  border-radius: 10px;
  text-align: justify;
  color: #fff8f8eb;
  background: #5e2ce8 !important;
}
.MuiTypography-displayBlock {
  color: white;
}