ReactJS:可点击的文本--如何禁用在文本区域之外的单击？

Question

我有一个带有资料UI排版的可点击文字组件：

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

​

​

正如您所看到的，排版占据了整个行区域，因此即使我将鼠标放在绿色区域(在同一行，但在文本区域外)，鼠标仍然会变成一个指针，您仍然可以单击它。

​

​

如何将单击严格限制为文本，而不是整个行区域？

Answer 1

您可以尝试将"component“支柱传递给MUI排版，并将其设置为span。

<Typography component="span">
  ...
</Typography>