React.js如何根据行的高度设置边框顶部？

如何解决React.js如何根据行的高度设置边框顶部？

我有一张桌子，我在该行底部的右侧设置了一个小红色三角形。如您所见，它的底部没有对齐。

在这里，我在同一张表中，另一行的右侧带有一个小红色三角形，并且已正确对齐。

以下是构成三角形的css代码：

    triangle: {  
      position: 'relative','&:after': {
         content: "''",position: 'absolute',top: 0,right: 0,width: 0,height: 0,display: 'block',borderLeft: '10px solid transparent',borderBottom: '10px solid #da2929',borderTop: '27px solid transparent',}
   }

   <td>
      <div className={classes.triangle}>Some Text</div>
   </td>

使用浏览器DevTools的inspect元素进行检查，如果我调整borderTop，我可以在正确的位置获得三角形，但是当然，它会更改正确的三角形并使其错误大声笑。我的问题是如何根据行高或也许基于div中文本的位置来设置borderTop？