Material UI 0.x的时代，CardMedia有个overlay的属性，可以快速添加一个overlay上去。Material UI 1.0以后，这个属性没了，手工撸一个简单的，效果如下。只是为了快速证明效果，所以简单粗暴的用了in-line style。正常要用的话还是用CSS-in-JS吧。Material UI推荐是withStyles()
overlay.jpeg
import React, { Component } from "react";
import { Card, CardMedia } from "@material-ui/core";
class Ovelay extends Component {
render() {
return (
<Card style={{ position: "relative" }}>
<CardMedia
style={{ height: 600 }}
image="https://pixabay.com/get/e030b40829e90021d85a5854e3484190e77fe6c818b4124491f6c67fa1ed_1280.jpg"
/>
<div
style={{
position: "absolute",
bottom: 0,
height: 100,
width: "100%",
backgroundColor: "black",
color: "white",
opacity: 0.7
}}
>
Hello James
</div>
</Card>
);
}
}
export default Ovelay;
