ReactJS中如何限制可点击文本仅在文本区域内响应点击

你使用的MDTypography是基于Material UI Typography封装的组件，默认渲染为block块级元素。块级元素默认宽度会撑满父容器的整行可用宽度，因此你绑定的onClick事件、设置的手型光标样式会覆盖整行区域，而非仅覆盖文本本身。

方案1（推荐）：修改元素display属性 #

给MDTypography组件添加display: 'inline-block'样式，将其从块级元素改为行内块元素，元素宽度会自动收缩到和文本内容一致，点击响应范围会严格限制在文本区域内。

注意：如果不需要给可点击文本设置上下外边距/内边距，也可以使用display: 'inline'；但inline-block对垂直方向边距的渲染支持更好，优先选择该值。

修改后的核心代码如下：

<MDBox mt={2} mb={1}>              
  <MDTypography 
    variant="body2" 
    style={{
      color: 'white', 
      cursor: "pointer",
      display: "inline-block" // 核心配置：修改盒模型为行内块
    }}
    onClick={()=>dispatch({type: "goBackToPage1"})}
  >
    Go back to previous page
  </MDTypography>
</MDBox>

如果你的组件支持MUI标准的sx属性（大部分MUI二次封装组件都支持），可以用更规范的sx写法代替内联style：

<MDBox mt={2} mb={1}>              
  <MDTypography 
    variant="body2" 
    sx={{
      color: 'white', 
      cursor: "pointer",
      display: "inline-block"
    }}
    onClick={()=>dispatch({type: "goBackToPage1"})}
  >
    Go back to previous page
  </MDTypography>
</MDBox>

方案2：交互逻辑绑定到内部行内标签 #

如果不想修改Typography组件本身的盒模型属性，可以在文本外层包裹一个原生<span>行内标签，将手型样式、点击事件都绑定到span标签上。行内标签天然只会包裹文本内容，不会占据整行宽度，也能实现点击范围的限制。
代码示例：

<MDBox mt={2} mb={1}>              
  <MDTypography variant="body2" style={{color: 'white'}}>
    <span 
      style={{cursor: "pointer"}}
      onClick={()=>dispatch({type: "goBackToPage1"})}
    >
      Go back to previous page
    </span>
  </MDTypography>
</MDBox>

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