Using ag-Grid with React: Styling

Hover Classes


This video is short but really handy. It turns out that it's very easy to customize the highlight colors when you hover over rows and columns. To do this, all you need to do is override the ag-row-hover and ag-column-hover classes that ag-Grid uses:

/* index.css */
.ag-row-hover {
  background-color: #dfdfff !important;

.ag-column-hover {
  background-color: #dfffdf;

Note that you will likely need to use !important to override any of ag-Grid's built-in row highlighting.


I finished! On to the next chapter