关于react.js:react自定义video视频播放样式鼠标移入播放移出停止

video 标签默认视频播放款式：

更改后的播放成果：

代码：

const [playStatus, setPlayStatus] = useState(new Array(4));   // 视频的播放状态，用于控住播放按钮的显示与暗藏

const videos = () => {const ref: (HTMLVideoElement | null)[] = [];
        return (
            <ul styleName="content-video">
                // videosConfig 存储一组视频的 url
                {videosConfig.map((e, i) => (<div styleName="video-item" key={e.fileUrl}>
                        <video
                            muted
                            src={e.fileUrl}
                            ref={el => {ref[i] = el;
                            }}
                            onMouseOver={() => {ref[i] && ref[i]?.play();
                                playStatus[i] = true;

                                setPlayStatus([...playStatus]);
                            }}
                            onMouseOut={() => {ref[i] && ref[i]?.pause();
                                playStatus[i] = false;
                                setPlayStatus([...playStatus]);
                            }}
                            key={e.fileUrl}
                            width="250px"
                            height="430px"
                        />
                        {!playStatus[i] && <Play />}  // 为 false 时显示播放按钮 <Play /> 组件为播放按钮 svg 图
                    </div>
                ))}
            </ul>
        );

Play 组件：

const Index = () => (
    <>
        <svg
            className={styles.play}
            viewBox="0 0 63 63"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
        >
            <g id="home" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                <g id="homePage" transform="translate(-428.000000, -544.000000)">
                    <g id="编组 -2" transform="translate(428.000000, 544.000000)">
                        <circle id="椭圆形" fill="#D8D8D8" opacity="0.7" cx="31.5" cy="31.5" r="31.5" />
                        <g id="播放" transform="translate(24.000000, 17.000000)" fill="#46464A" fillRule="nonzero">
                            <path
                                d="M2.64369111,0.256232087 L23.1138308,12.8699856 C24.2953897,13.5949062 24.2953897,15.4072217 23.1138308,16.1321706 L2.64369111,28.7459241 C1.46213223,29.4708446 0,28.5574498 0,27.1075804 L0,1.88007338 C0,0.430203955 1.46216108,-0.468716787 2.64369111,0.256203762"
                                id="门路"
                            />
                        </g>
                    </g>
                </g>
            </g>
        </svg>
    </>
);

export default Index;

款式代码：使播放按钮居中

  .video-item {position: relative;}
   svg {
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
   }