关于react.js: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>