React组件中Sign Up按钮无法点击问题求助

我的React组件Abar右侧包含Sign Up和Sign In按钮，其中Sign Up按钮无法触发点击事件，Sign In按钮正常。组件代码如下：

import React from "react";

export default function Abar() {

    const handleClick = () => {
        console.log("Eee");
    };

    const styles = {
        body: {
            margin: 0,
            fontFamily: "Arial, sans-serif"
        },
        flexContainer: {
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "10px 20px",
            backgroundColor: "black",
            color: "white"
        },
        skillSphereTitle: {
            fontSize: "24px"
        },
        buttonContainer: {
            display: "flex",
            gap: "10px"
        },
        button: {
            color: "white",
            border: "1px solid transparent",
            borderTop: "4px solid #0169AD",
            backgroundColor: "black",
            cursor: "pointer",
            padding: "10px 20px"
        }
    };

    return (
        <div style={styles.flexContainer}>
            <div>
                <h6 style={styles.skillSphereTitle}>
                    Skill Sphere
                </h6>
            </div>
            <div style={styles.buttonContainer}>
                <button
                    type="button"
                    style={styles.button}
                    onClick={() => console.log("Rohan")}
                >
                    Sign Up
                </button>
                <button
                    type="button"
                    style={styles.button}
                    onClick={() => console.log("Rohan")}
                >
                    Sign In
                </button>
            </div>
        </div>
    );
}

从代码逻辑看，两个按钮的绑定完全一致，Sign In正常说明基础事件机制没问题，优先排查以下几个常见问题：

• 元素被覆盖
  打开浏览器开发者工具（F12），在Elements面板选中Sign Up按钮，查看右侧Box Model确认元素尺寸是否正常，同时检查是否有其他层级更高的元素（比如父容器外的绝对定位元素）覆盖在按钮上方。若存在覆盖，调整对应元素的z-index或位置。

• 样式属性拦截点击
  在Elements面板的Styles标签查看按钮的计算样式，确认：

  • pointer-events 属性值为auto（而非none）
  • 没有被全局样式篡改了点击相关属性

• 事件绑定测试
  把Sign Up按钮的onClick替换为预先定义的handleClick函数，验证是否能触发控制台输出：

  <button
      type="button"
      style={styles.button}
      onClick={handleClick}
  >
      Sign Up
  </button>
  

  如果能触发，说明原箭头函数写法可能存在隐性冲突（虽然代码无明显错误，但可排除事件绑定本身的问题）。

• 全局事件干扰
  在Sources面板搜索全局的addEventListener('click')，查看是否有事件处理函数调用了e.stopPropagation()或e.preventDefault()，导致按钮点击事件被拦截。若存在，调整全局事件逻辑避免影响按钮。

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