ReactJS:单击interaction，不是处理我的内容，而是处理标题

Question

目标:显示带有Youtube视频的iframe，用户可以单击“播放/暂停”。

问题:我不能在我的主要内容中点击任何东西，但是如果我把它放在导航组件或页脚组件中，它就能正常工作了。

我尝试过的是:我尝试了很多调试，最终发现这就是问题所在，但现在我不知道该做什么

以下是工作良好的导航组件的代码：

import React, { useState }  from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Container from "react-bootstrap/Container";
import { Link } from "react-router-dom";

import {NavLink} from "react-router-dom";
import {
    AiOutlineHome,
} from "react-icons/ai";
import {Button} from "react-bootstrap";

function Navigation() {
  const [expand, updateExpanded] = useState(false);
  const [navColour, updateNavbar] = useState(false);

  function scrollHandler() {
    if (window.scrollY >= 20) {
      updateNavbar(true);
    } else {
      updateNavbar(false);
    }
  }
  window.addEventListener("scroll", scrollHandler);

    return (
        <Navbar
            expanded={expand}
            fixed="top"
            expand="md"
            className={navColour ? "sticky" : "navbar"}
        >
          <Container>
            <Navbar.Brand href="/" className="d-flex">
              <p style={{marginTop: "15px"}}><strong className="main-name"> D</strong>egen <strong className="main-name">B</strong>ounty <strong className="main-name">H</strong>unter</p>
            </Navbar.Brand>
            <Navbar.Toggle
                aria-controls="responsive-navbar-nav"
                onClick={() => {
                  updateExpanded(expand ? false : "expanded");
                }}
            >
            </Navbar.Toggle>
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="ms-auto" defaultActiveKey="#home">
                <Nav.Item>
                  <Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
                    <AiOutlineHome style={{ marginBottom: "2px" }} /> Home
                  </Nav.Link>
                </Nav.Item>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
    );
}

export default Navigation;

这里是白皮书组件的代码，它不允许我点击任何东西：

import React from "react";
import {Container, Row, Col} from "react-bootstrap";
import wp_1 from "../Assets/wp_1.png";

function Whitepaper() {
    return (<section>
            <Container fluid className="whitepaper-section" id="whitepaper">
                <Container className="whitepaper-content">
                    <div>
                        <button onClick={() => alert("test")}>Add</button>
                        <iframe
                            src="https://www.youtube.com/embed/E7wJTI-1dvQ"
                            frameBorder="0"
                            allow="autoplay; encrypted-media"
                            allowFullScreen
                            title="video"
                        />
                        {" "}
                    </div>

                    <Row>
                        <Col md={12}>
                            <img src={wp_1} alt="roadmap pic" className="img-fluid" style={{maxWidth: '50%'}}/>
                        </Col>
                    </Row>
                </Container>
            </Container>
        </section>);
}

export default Whitepaper;

所以再一次，当我把光标传递到按钮或iframe上时，光标的形状不会改变，我也不能点击。我可以选择文本，选择图片和右键点击各地。

在CSS文件中，我寻找pointer-events: none;，但我没有这样的东西

发生什么事了？

Answer 1

问题在于我所拥有的css文件：

z-index: -1;

去掉这条线，现在一切都好了