如何使用Material UI Card和CardMedia在背景图像上添加一些文本

npm install @material-ui/core

yarn add @material-ui/core

import React from 'react';
import { Card, CardMedia, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  card: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
  textOverlay: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    color: 'white',
    textAlign: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    padding: '10px',
  },
});

function MyCard() {
  const classes = useStyles();

  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.media}
        image="path/to/your/image.jpg"
      >
        <Typography variant="h5" className={classes.textOverlay}>
          Your Text Here
        </Typography>
      </CardMedia>
    </Card>
  );
}