Javascript <；a>；或<；按钮>；仅当单击上半部分时才有效

我在执行React项目时遇到了一个非常奇怪的问题。我必须呈现包含按钮的项目列表。但该按钮只能在单击上半部分时触发。当我将鼠标移到按钮的下方时，什么也没有发生，甚至光标也不会移动。我把它改为标签a，它的行为是一样的，只有顶部部分工作。当点击顶部部分时，该功能工作正常，所以我不认为这是一个问题。但问题在哪里呢？请帮帮我，非常感谢。代码如下：

内容：

    const Array = [{
      title: XXX,
      content: (
        <button onClick={handleClick}>
          Click me
        </button>
      ),
}, ... (there are other elements which I do not write here)]

const数组=[{
标题：XXX，
内容：(
点击我
),
}，…（还有其他元素我不在这里写）]

渲染部分：

        {Array
          .map((row, idx) => (
            <div key={idx} className={classes.row}>
              <Typography >{row.title}</Typography>
              <Typography >{row.content}</Typography>
            </div>
          ))}
      </div>

{Array
.map（（行，idx）=>(
{row.title}
{row.content}
))}

听起来像是另一个元素在重叠它…问题可能在css中，最好也看到css代码，并尝试删除

排版

并测试它，或者在按钮中添加样式并给它一个

zIndex:1

，可能是重叠的内容在呈现的HTML中查找此类内容：