手工撸一个Material UI的overlay效果

Material UI 0.x的时代，CardMedia有个overlay的属性，可以快速添加一个overlay上去。Material UI 1.0以后，这个属性没了，手工撸一个简单的，效果如下。只是为了快速证明效果，所以简单粗暴的用了in-line style。正常要用的话还是用CSS-in-JS吧。Material UI推荐是withStyles()

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;