如何在React中通过react-modal-video居中YouTube弹窗并设置宽高

我尝试使用import ModalVideo from "react-modal-video"实现YouTube弹窗居中并设置宽高，但点击按钮后弹窗显示在左侧，设置的样式属性不生效。以下是我的源码：

import React, { useState } from "react";
import { Link } from "react-router-dom";
import ModalVideo from "react-modal-video";
import Header from "../components/Header";
import Footer from "../components/Footer";

export default function Index(){
    const [isOpen, setOpen] = useState(false)
      return(
        <div id="mainBackground" className="master-container">
        <Header/>
        <main className="content-featured">
            <h1 className="txt-light-xxl-white text-center"><nobr>aaaa</nobr> graphics in minutes</h1>
            <h2 className="txt-book-fs21-gray text-center">bbbb</h2>
            <div className="modalvideo">
                <ModalVideo channel="youtube" isOpen={isOpen} videoId="nu3qgYef2uM" onClose={() => setOpen(false)} classNames="youtube-player" styles={{modal: {maxWidth: '800px', width: '80%', minHeight: '480px', }}}/>
            </div>
            <div className="youtube">
                <button className="youtube-btn text-uppercase" onClick={() => setOpen(true)}>View Intro <img src="images/play-icon.png" className="play-icon"/></button>
            </div>
            
        </main>
        <Footer/>
    </div>
)
}

请问如何让YouTube播放器居中，并在ModalVideo元素中正确设置宽高？

react-modal-video的默认样式优先级较高，直接通过组件styles属性可能无法完全覆盖，推荐以下两种实现方式：

方法一：自定义类名+CSS覆盖样式 #

1. 保留组件上的classNames="youtube-player"配置
2. 在全局CSS文件中添加以下样式：

/* 弹窗容器水平垂直居中 */
.youtube-player .react-modal-video-modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 设置弹窗内容区域的宽高 */
.youtube-player .react-modal-video-modal-body {
  max-width: 800px;
  width: 80%;
  min-height: 480px;
}

/* 让视频iframe自适应容器宽高 */
.youtube-player .react-modal-video-video {
  width: 100%;
  height: 100%;
}

方法二：正确配置组件styles属性（覆盖内层元素） #

如果坚持使用组件自带的styles属性，需要针对更内层的元素设置样式，示例：

<ModalVideo
  channel="youtube"
  isOpen={isOpen}
  videoId="nu3qgYef2uM"
  onClose={() => setOpen(false)}
  styles={{
    // 控制弹窗容器居中
    modal: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'rgba(0,0,0,0.8)'
    },
    // 设置弹窗内容的宽高
    modalBody: {
      maxWidth: '800px',
      width: '80%',
      minHeight: '480px'
    },
    // 让视频容器自适应
    video: {
      width: '100%',
      height: '100%'
    }
  }}
/>

注意事项 #

• 确保CSS文件是全局引入的，若使用CSS Modules，需通过权重更高的选择器覆盖默认样式（尽量避免使用!important）
• 检查是否有其他全局样式干扰弹窗布局

内容的提问来源于stack exchange，提问作者Yug