I am trying to decrease the height of a react mui table row with the following methods:

Firstly, in index.css:

tr{
    height:20px;
}

Secondly, in source code app.js:

...
<TableRow style={{height: 5}}>
    <TableCell>
        hello
    </TableCell>
    <TableCell>
        hello
    </TableCell>
</TableRow>
...

And the makeStyle and useStyle methods of @mui/styles.

All the methods can succeed, but the problem is that, if I decrease the height below a certain value, then it stops working. All I have in the table are texts, and the program refuses to decrease table row height even when we can still see a wide margin between the text and the table row separation line.

Is there a way to force mui to decrease the row height below this value? Do we have the option to decrease the height all the way to zero (even though that will make text invisible)?