React 水印

给页面增加水印

效果图:

water.js:

import React from "react";
import "./index.less";

function WaterMark(props) {

    const { children } = props;

    return (
        <div className="waterMark">
            <div className="text">
                {children}
            </div>
        </div>
    )
}

export default WaterMark;

index.less:

.waterMark {
    position       : fixed;
    top            : 0;
    bottom         : 0;
    right          : 0;
    left           : 0;
    display        : flex;
    justify-content: center;
    align-items    : center;
    pointer-events : none;

    .text {
        color         : rgba(#999, 0.3);
        width         : 50vw;
        height        : 50vh;
        line-height   : 40vh;
        font-size     : 40vh;
        text-align    : center;
        transform     : rotateZ(-45deg);
        pointer-events: none;
    }
}

how to use:

import WaterMark from "components/WaterMark";
<WaterMark>Hello World</WaterMark>