0

I've found some css styling that I would like to add to a Material-Table component in my React app, so it highlights the hovered row. See it below:

tr:hover {
  background: gray !important;
}

How can I apply this to my component without using an external css file? Is it using some inline styling, or useStyles or something else? I'm a bit weak on this area.

Jon
  • 501
  • 3
  • 18
  • This post may help you https://stackoverflow.com/a/1033166/6062364. Is says you should'nt use inline styling for pseudo selectors. You could simply write the style in a css file and import it in you component file. – Kuncheria Sep 23 '21 at 12:44
  • Does the same apply to useStyles? – Jon Sep 23 '21 at 13:32
  • Yes, you can use `makeStyles` or `withStyles` to implement this on the table. Just forked an example of the MUI [table](https://codesandbox.io/s/material-demo-forked-0bwj9?file=/demo.js). – Junaid Faryad Sep 23 '21 at 14:35

0 Answers0