Duplicate classes for <td> and <div> in table cells

Hi!

I have upgraded mui-datatables: 2.12.0 -> 3.7.8. I found some breaking changes messing up our layouts in a huge frontend application. The reason is the new inner div element that is now rendered inside the table cell, while also receiving the same classes as the conatining element from setCellProps. This is problematic for styles like padding and border, where paddings double up, and inner borders appear.

Layout after upgrading:

Layout when I remove the inner divs with the duplicate classes (with inspector):

Expected Behavior

When rendering the table,

there should be no inner div elements, as it was before. I could not find any reason in the history for this change.
OR the divs should not receive the same classes as the td elements from setCellProps
OR there should be a way to specify classes for the td and the inner div element

EDIT

Current Behavior

I tried to reproduce the issue in the code sandbox. I have found out, that if I set the styles property with setCellProps, than the divs do not receive the styles, but when setting the className, both the div and the td element receive it.

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

import makeStyles from '@material-ui/styles/makeStyles';

const myStyles = {
  padding: 8,
  border: '1px solid black'
};

const useStyles = makeStyles(() => ({
  test: myStyles,
}))

function App() {
  const classes = useStyles();
  const columns = [{name: "Name", options: {
    setCellProps: (_, index) => (index % 2 === 0 ? { style: myStyles } : { className: classes.test })
  }}];

  const options = {
    filter: true,
    filterType: "dropdown",
  };

  const data = [
    ["Gabby Georgee", "Business Analyst", "Minneapolis"],
    [
      "Aiden Lloyd",
      "Business Consultant for an International Company and CEO of Tony's Burger Palace",
      "Dallas"
    ],
    ["Jaden Collins", "Attorney", "Santa Ana"],
    ["Franky Rees", "Business Analyst", "St. Petersburg"],
    ["Aaren Rose", null, "Toledo"],
    ["Johnny Jones", "Business Analyst", "St. Petersburg"],
    ["Jimmy Johns", "Business Analyst", "Baltimore"],
    ["Jack Jackson", "Business Analyst", "El Paso"],
    ["Joe Jones", "Computer Programmer", "El Paso"],
    ["Jacky Jackson", "Business Consultant", "Baltimore"],
    ["Jo Jo", "Software Developer", "Washington DC"],
    ["Donna Marie", "Business Manager", "Annapolis"]
  ];

  return (
    <React.Fragment>
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
      />
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Top highlight: setCellProps: (_, index) => (index % 2 === 0 ? { style: myStyles } : { className: classes.test })

EDIT 2 Removing lines https://github.com/gregnb/mui-datatables/blob/master/src/components/TableBodyCell.js#L146 https://github.com/gregnb/mui-datatables/blob/master/src/components/TableBodyCell.js#L167 solves the problem, I have checked in a code sandbox.

Your Environment

Tech	Version
Material-UI	4.11
MUI-datatables	3.7.8
React	16.8
browser	chrome

gregnb / mui-datatables