title: changing Material-ui table style in row.getRowProps()
body: <p>In my react application I'm using Material-UI enhanced table which is based on react-table and I would like to change the style of their rows.</p>
  <p>Reading from documentation (<a href="https://material-ui.com/api/table-row/" rel="nofollow noreferrer">https://material-ui.com/api/table-row/</a>) in the component TableRow should be used the prop &quot;classes&quot; to change the style, but in the MaterialUi code props are read this way:</p>
  <pre><code>  &lt;TableRow {...row.getRowProps()}&gt;
  </code></pre>
  <p>My question is how can I use the prop classes if the TableRow props are added automatically? I thought I needed to have this:</p>
  <pre><code> &lt;TableRow classes=&quot;rowStyle &quot;&gt;
  </code></pre>
  <p>where rowStyle is:</p>
  <pre><code> const styles = {
         rowStyle : {
            padding: 10,
            border: &quot;1px solid red&quot;
         }
      };
  </code></pre>
  <p>But obviously I can't this way, how can I add &quot;classes&quot; to the getRowProps() and the new style in it?</p>
  <p>I couldn't find an explanation or a good example in official documentation or stackOverflow</p>
  <p>Many thanks for the help</p>
  <p>EnhancedTable.js:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  
  import Checkbox from "@material-ui/core/Checkbox";
  import MaUTable from "@material-ui/core/Table";
  import PropTypes from "prop-types";
  import TableBody from "@material-ui/core/TableBody";
  import TableCell from "@material-ui/core/TableCell";
  import TableContainer from "@material-ui/core/TableContainer";
  import TableFooter from "@material-ui/core/TableFooter";
  import TableHead from "@material-ui/core/TableHead";
  import TablePagination from "@material-ui/core/TablePagination";
  import TablePaginationActions from "./TablePaginationActions";
  import TableRow from "@material-ui/core/TableRow";
  import TableSortLabel from "@material-ui/core/TableSortLabel";
  import TableToolbar from "./TableToolbar";
  import {
    useGlobalFilter,
    usePagination,
    useRowSelect,
    useSortBy,
    useTable,
  } from "react-table";
  
  const IndeterminateCheckbox = React.forwardRef(
    ({ indeterminate, ...rest }, ref) =&gt; {
      const defaultRef = React.useRef();
      const resolvedRef = ref || defaultRef;
  
      React.useEffect(() =&gt; {
        resolvedRef.current.indeterminate = indeterminate;
      }, [resolvedRef, indeterminate]);
  
      return (
        &lt;div&gt;
          &lt;Checkbox ref={resolvedRef} {...rest} /&gt;
        &lt;/div&gt;
      );
    }
  );
  
  const inputStyle = {
    padding: 0,
    margin: 0,
    border: 0,
    background: "transparent",
  };
  
  // Create an editable cell renderer
  const EditableCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateMyData, // This is a custom function that we supplied to our table instance
  }) =&gt; {
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);
  
    const onChange = (e) =&gt; {
      setValue(e.target.value);
    };
  
    // We'll only update the external data when the input is blurred
    const onBlur = () =&gt; {
      updateMyData(index, id, value);
    };
  
    // If the initialValue is changed externall, sync it up with our state
    React.useEffect(() =&gt; {
      setValue(initialValue);
    }, [initialValue]);
  
    return (
      &lt;input
        style={inputStyle}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      /&gt;
    );
  };
  
  EditableCell.propTypes = {
    cell: PropTypes.shape({
      value: PropTypes.any.isRequired,
    }),
    row: PropTypes.shape({
      index: PropTypes.number.isRequired,
    }),
    column: PropTypes.shape({
      id: PropTypes.number.isRequired,
    }),
    updateMyData: PropTypes.func.isRequired,
  };
  
  // Set our editable cell renderer as the default Cell renderer
  const defaultColumn = {
    Cell: EditableCell,
  };
  
  const EnhancedTable = ({
    columns,
    data,
    setData,
    updateMyData,
    skipPageReset,
  }) =&gt; {
    const {
      getTableProps,
      headerGroups,
      prepareRow,
      page,
      gotoPage,
      setPageSize,
      preGlobalFilteredRows,
      setGlobalFilter,
      state: { pageIndex, pageSize, selectedRowIds, globalFilter },
    } = useTable(
      {
        columns,
        data,
        defaultColumn,
        autoResetPage: !skipPageReset,
        // updateMyData isn't part of the API, but
        // anything we put into these options will
        // automatically be available on the instance.
        // That way we can call this function from our
        // cell renderer!
        updateMyData,
      },
      useGlobalFilter,
      useSortBy,
      usePagination,
      useRowSelect,
      (hooks) =&gt; {
        hooks.allColumns.push((columns) =&gt; [
          // Let's make a column for selection
          {
            id: "selection",
            // The header can use the table's getToggleAllRowsSelectedProps method
            // to render a checkbox.  Pagination is a problem since this will select all
            // rows even though not all rows are on the current page.  The solution should
            // be server side pagination.  For one, the clients should not download all
            // rows in most cases.  The client should only download data for the current page.
            // In that case, getToggleAllRowsSelectedProps works fine.
            Header: ({ getToggleAllRowsSelectedProps }) =&gt; (
              &lt;div&gt;
                &lt;IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} /&gt;
              &lt;/div&gt;
            ),
            // The cell can use the individual row's getToggleRowSelectedProps method
            // to the render a checkbox
            Cell: ({ row }) =&gt; (
              &lt;div&gt;
                &lt;IndeterminateCheckbox {...row.getToggleRowSelectedProps()} /&gt;
              &lt;/div&gt;
            ),
          },
          ...columns,
        ]);
      }
    );
  
    const handleChangePage = (event, newPage) =&gt; {
      gotoPage(newPage);
    };
  
    const handleChangeRowsPerPage = (event) =&gt; {
      setPageSize(Number(event.target.value));
    };
  
    const removeByIndexs = (array, indexs) =&gt;
      array.filter((_, i) =&gt; !indexs.includes(i));
  
    const deleteUserHandler = (event) =&gt; {
      const newData = removeByIndexs(
        data,
        Object.keys(selectedRowIds).map((x) =&gt; parseInt(x, 10))
      );
      setData(newData);
    };
  
    const addUserHandler = (user) =&gt; {
      const newData = data.concat([user]);
      setData(newData);
    };
  
    // Render the UI for your table
    return (
      &lt;TableContainer&gt;
        &lt;TableToolbar
          numSelected={Object.keys(selectedRowIds).length}
          deleteUserHandler={deleteUserHandler}
          addUserHandler={addUserHandler}
          preGlobalFilteredRows={preGlobalFilteredRows}
          setGlobalFilter={setGlobalFilter}
          globalFilter={globalFilter}
        /&gt;
        &lt;MaUTable {...getTableProps()}&gt;
          &lt;TableHead&gt;
            {headerGroups.map((headerGroup) =&gt; (
              &lt;TableRow {...headerGroup.getHeaderGroupProps()}&gt;
                {headerGroup.headers.map((column) =&gt; (
                  &lt;TableCell
                    {...(column.id === "selection"
                      ? column.getHeaderProps()
                      : column.getHeaderProps(column.getSortByToggleProps()))}
                  &gt;
                    {column.render("Header")}
                    {column.id !== "selection" ? (
                      &lt;TableSortLabel
                        active={column.isSorted}
                        // react-table has a unsorted state which is not treated here
                        direction={column.isSortedDesc ? "desc" : "asc"}
                      /&gt;
                    ) : null}
                  &lt;/TableCell&gt;
                ))}
              &lt;/TableRow&gt;
            ))}
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {page.map((row, i) =&gt; {
              prepareRow(row);
              return (
                &lt;TableRow {...row.getRowProps()}&gt;
                  {row.cells.map((cell) =&gt; {
                    return (
                      &lt;TableCell {...cell.getCellProps()}&gt;
                        {cell.render("Cell")}
                      &lt;/TableCell&gt;
                    );
                  })}
                &lt;/TableRow&gt;
              );
            })}
          &lt;/TableBody&gt;
  
          &lt;TableFooter&gt;
            &lt;TableRow&gt;
              &lt;TablePagination
                rowsPerPageOptions={[
                  5,
                  10,
                  25,
                  { label: "All", value: data.length },
                ]}
                colSpan={3}
                count={data.length}
                rowsPerPage={pageSize}
                page={pageIndex}
                SelectProps={{
                  inputProps: { "aria-label": "rows per page" },
                  native: true,
                }}
                onChangePage={handleChangePage}
                onChangeRowsPerPage={handleChangeRowsPerPage}
                ActionsComponent={TablePaginationActions}
              /&gt;
            &lt;/TableRow&gt;
          &lt;/TableFooter&gt;
        &lt;/MaUTable&gt;
      &lt;/TableContainer&gt;
    );
  };
  
  EnhancedTable.propTypes = {
    columns: PropTypes.array.isRequired,
    data: PropTypes.array.isRequired,
    updateMyData: PropTypes.func.isRequired,
    setData: PropTypes.func.isRequired,
    skipPageReset: PropTypes.bool.isRequired,
  };
  
  export default EnhancedTable;</code></pre>
  </div>
  </div>
  </p>