title: MaterialUI React Table -> Diver Color and Page Dropdown colors
body: <p>I am trying to change the divider color in my TableBody, and also the background color of the Rows per page dropdown menu. Any help is appreciated, thank you!</p>
  <p>I am using styled-components ThemeProvider to toggle the theme in my app, so I am passing this hook as a prop for MUI components and adjusting their colors with this method:
  props.theme === 'light' ? '#fff' : '#2a2a2a'</p>
  <p><a href="https://i.stack.imgur.com/E0jJ7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E0jJ7.png" alt="Table Screenshot" /></a></p>
  <pre><code>&lt;Box sx={{ width: '99.5%' }}&gt;
        &lt;Paper sx={{ width: '100%', mb: 2 }}&gt;
          &lt;EnhancedTableToolbar theme={props.theme} numSelected={selected.length} /&gt;
          &lt;TableContainer&gt;
            &lt;Table
              sx={{ minWidth: 750, background: props.theme === 'light' ? '#fff' : '#2a2a2a' }}
              aria-labelledby=&quot;tableTitle&quot;
              size={dense ? 'small' : 'medium'}
            &gt;
              &lt;EnhancedTableHead
                sx={{ background: props.theme === 'light' ? '#fff' : '#2a2a2a' }}
                numSelected={selected.length}
                order={order}
                orderBy={orderBy}
                onSelectAllClick={handleSelectAllClick}
                onRequestSort={handleRequestSort}
                rowCount={rows.length}
              /&gt;
              &lt;TableBody&gt;
                {/* if you don't need to support IE11, you can replace the `stableSort` call with:
                   rows.slice().sort(getComparator(order, orderBy)) */}
                {stableSort(rows, getComparator(order, orderBy))
                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                  .map((row, index) =&gt; {
                    const isItemSelected = isSelected(row.macid);
                    const labelId = `enhanced-table-checkbox-${index}`;
  
                    return (
                      &lt;TableRow
                        hover
                        role=&quot;checkbox&quot;
                        aria-checked={isItemSelected}
                        tabIndex={-1}
                        key={row.macid}
                        selected={isItemSelected}
                      &gt;
                        &lt;TableCell
                          component=&quot;th&quot;
                          id={labelId}
                          scope=&quot;row&quot;
                        &gt;
                          {row.macid}
                        &lt;/TableCell&gt;
                        &lt;TableCell align=&quot;right&quot;&gt;{row.cpu}&lt;/TableCell&gt;
                        &lt;TableCell align=&quot;right&quot;&gt;{row.ram}&lt;/TableCell&gt;
                        &lt;TableCell align=&quot;right&quot;&gt;{row.disk}&lt;/TableCell&gt;
                        &lt;TableCell align=&quot;right&quot;&gt;{row.temperature}&lt;/TableCell&gt;
                      &lt;/TableRow&gt;
                    );
                  })}
                {emptyRows &gt; 0 &amp;&amp; (
                  &lt;TableRow
                    style={{
                      height: (dense ? 33 : 53) * emptyRows,
                    }}
                  &gt;
                    &lt;TableCell colSpan={6} /&gt;
                  &lt;/TableRow&gt;
                )}
              &lt;/TableBody&gt;
            &lt;/Table&gt;
          &lt;/TableContainer&gt;
          &lt;TablePagination
            sx={{background: props.theme === 'light' ? '#fff' : '#2a2a2a'}}
            rowsPerPageOptions={[5, 10, 25]}
            component=&quot;div&quot;
            count={rows.length}
            rowsPerPage={rowsPerPage}
            page={page}
            onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage}
          /&gt;
        &lt;/Paper&gt;
        &lt;FormControlLabel
          control={&lt;Switch checked={dense} onChange={handleChangeDense} /&gt;}
          label=&quot;Dense padding&quot;
        /&gt;
      &lt;/Box&gt;
  </code></pre>