如何为Material UI ListItemText的span子元素添加data-metrics属性

直接在ListItemText上设置data-metrics会把属性加到组件外层的div容器上，要把属性加到文本对应的span上，有两种可行方法：

方法1：利用primaryTypographyProps传递属性 #

ListItemText的primary内容会被渲染为Typography组件，通过primaryTypographyProps可以给这个Typography传递自定义属性，而Typography默认会把属性传递到它渲染的底层元素（默认是span）：

<ListItem button key={`list_item_${index}`}
  component={Link} to={data.url}
  activeClassName={classes.activeLink} partiallyActive={true}
  focusVisibleClassName={classes.buttonOnFocus}>
  <ListItemText 
    primary={data.name}
    primaryTypographyProps={{
      'data-metrics': `{"btnname":"${data.name.toLowerCase()}"}`
    }}
  />
</ListItem>

方法2：自定义primary的内容，手动包裹span #

直接把primary设置为一个带自定义属性的span元素，完全控制文本容器：

<ListItem button key={`list_item_${index}`}
  component={Link} to={data.url}
  activeClassName={classes.activeLink} partiallyActive={true}
  focusVisibleClassName={classes.buttonOnFocus}>
  <ListItemText 
    primary={
      <span data-metrics={`{"btnname":"${data.name.toLowerCase()}"}`}>
        {data.name}
      </span>
    }
  />
</ListItem>

两种方法都能让data-metrics属性正确添加到显示文本的span元素上，你可以根据自己的需求选择。

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