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

Question

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

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

以下是构成三角形的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？