passing a scss classname down to a vanilla dom element on react state changes 🤯

src/views/components/injected/TableRow/TableRow.module.scss

@@ -0,0 +1,8 @@
+@import 'src/views/styles/base.module.scss';
+
+.selectedRow {
+    td {
+        background: green !important;
+        color: white !important;
+    }
+}

src/views/components/injected/TableRow/TableRow.tsx

@@ -2,10 +2,12 @@ import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Course, CourseRow } from 'src/shared/types/Course';
 import { SiteSupport } from 'src/views/lib/getSiteSupport';
-import { Button } from '../common/Button/Button';
+import { Button } from '../../common/Button/Button';
+import styles from './TableRow.module.scss';
 
 interface Props {
     support: SiteSupport;
+    isSelected: boolean;
     course: Course;
     element: HTMLTableRowElement;
     onClick: (...args: any[]) => any;
@@ -15,7 +17,8 @@ interface Props {
  * This component is injected into each row of the course catalog table.
  * @returns a react portal to the new td in the column or null if the column has not been created yet.
  */
-export default function TableRow({ support, course, element, onClick }: Props): JSX.Element | null {
+export default function TableRow({ support, course, element, isSelected, onClick }: Props): JSX.Element | null {
+    console.log('TableRow -> isSelected:', isSelected);
     const [container, setContainer] = useState<HTMLTableCellElement | null>(null);
 
     useEffect(() => {
@@ -25,6 +28,14 @@ export default function TableRow({ support, course, element, onClick }: Props):
         setContainer(portalContainer);
     }, []);
 
+    useEffect(() => {
+        if (isSelected) {
+            element.classList.add(styles.selectedRow);
+        } else {
+            element.classList.remove(styles.selectedRow);
+        }
+    }, [course, isSelected]);
+
     if (!container) {
         return null;
     }