add styling components

dist/index.js

@@ -1861,20 +1861,8 @@ function stableSort(array, comparator) {
   });
 }
 
-var StyledTableCell = styles.withStyles(function (theme) {
-  return {
-    head: {
-      backgroundColor: '#0d47a1a8',
-      color: theme.palette.common.white
-    },
-    body: {
-      fontSize: 14
-    }
-  };
-})(TableCell);
-
 function EnhancedTableHead(props) {
-  var classes = props.classes,
+  var headerStyles = props.headerStyles,
       _order = props._order,
       _orderBy = props._orderBy,
       onRequestSort = props.onRequestSort,
@@ -1886,8 +1874,25 @@ function EnhancedTableHead(props) {
     };
   };
 
-  return /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, headCells.map(function (headCell) {
-    return /*#__PURE__*/React__default.createElement(StyledTableCell, {
+  var sortedStyle = core.createMuiTheme({
+    overrides: {
+      MuiTableSortLabel: {
+        root: {
+          "&$active": {
+            color: headerStyles.sortedHeader === undefined ? 'grey' : headerStyles.sortedHeader,
+            "&& $icon": {
+              color: headerStyles.sortedHeader === undefined ? 'grey' : headerStyles.sortedHeader
+            }
+          }
+        }
+      }
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(core.ThemeProvider, {
+    theme: sortedStyle
+  }, /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, headCells.map(function (headCell) {
+    return /*#__PURE__*/React__default.createElement(TableCell, {
+      className: headerStyles.head,
       key: headCell.id,
       align: headCell.numeric ? 'right' : 'left',
       padding: headCell.disablePadding ? 'none' : 'default',
@@ -1903,73 +1908,72 @@ function EnhancedTableHead(props) {
         whiteSpace: "nowrap"
       }
     }, headCell.label, _orderBy === headCell.id ? /*#__PURE__*/React__default.createElement("span", {
-      className: classes.visuallyHidden
+      className: headerStyles.visuallyHidden
     }, _order === 'desc' ? 'sorted descending' : 'sorted ascending') : null) : /*#__PURE__*/React__default.createElement(TableSortLabel, {
       hideSortIcon: "true",
       align: "right"
     }, headCell.label));
-  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+  }), /*#__PURE__*/React__default.createElement(TableCell, {
+    className: headerStyles.head,
     style: {
       width: '100px'
     }
-  })));
+  }))));
 }
 
 EnhancedTableHead.propTypes = {
-  classes: propTypes.object.isRequired,
+  headerStyles: propTypes.object.isRequired,
   onRequestSort: propTypes.func.isRequired,
   onSelectAllClick: propTypes.func.isRequired,
   _order: propTypes.oneOf(['asc', 'desc']).isRequired,
   _orderBy: propTypes.string.isRequired,
   rowCount: propTypes.number.isRequired
 };
-var useStyles$1 = styles.makeStyles(function (theme) {
-  return {
-    root: {
-      width: '100%'
-    },
-    paper: {
-      width: '100%',
-      marginBottom: theme.spacing(2)
-    },
-    table: {
-      tableLayout: 'fixed'
-    },
-    visuallyHidden: {
-      b_order: 0,
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      margin: -1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      top: 20,
-      width: 1
-    },
-    underline: {
-      "&&&:before": {
-        b_orderBottom: "none"
-      },
-      "&&:after": {
-        b_orderBottom: "none"
-      }
+var useStyles$1 = styles.makeStyles({
+  root: {
+    width: '100%'
+  },
+  table: {
+    tableLayout: 'fixed'
+  },
+  visuallyHidden: {
+    b_order: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  },
+  underline: {
+    "&&&:before": {
+      b_orderBottom: "none"
     },
-    bomLink: {
-      cursor: "pointer",
-      color: theme.primary,
-      textDecoration: "underline"
+    "&&:after": {
+      b_orderBottom: "none"
     }
-  };
-});
-var StyledTableRow = styles.withStyles(function (theme) {
-  return {
-    root: {
+  },
+  head: function head(props) {
+    return {
+      backgroundColor: props.headerBackgroundColor === undefined ? '#0d47a1a8' : props.headerBackgroundColor,
+      color: props.headerTextColor === undefined ? 'white' : props.headerTextColor
+    };
+  },
+  sortedHeader: function sortedHeader(props) {
+    return {
+      color: props.headerTextColor === undefined ? 'grey' : props.headerTextColor
+    };
+  },
+  styledTableRow: function styledTableRow(props) {
+    return {
       '&:nth-of-type(even)': {
-        backgroundColor: '#0d47a11c'
+        backgroundColor: props.primaryColor === undefined ? '#0d47a11c' : props.primaryColor
       }
-    }
-  };
-})(TableRow);
+    };
+  }
+});
 
 function getUpdatedDate(p) {
   var statusDate = p.updated_date;
@@ -2113,7 +2117,8 @@ ConfirmDialog.propTypes = {
 };
 
 function MkTable(props) {
-  var classes = useStyles$1();
+  console.log("props.styles:", props.styles);
+  var classes = useStyles$1(props.styles);
   var dispatch = props.dispatch,
       _props$data = props.data,
       data = _props$data === void 0 ? [] : _props$data,
@@ -2248,23 +2253,26 @@ function MkTable(props) {
     size: _dense ? 'small' : 'medium',
     "aria-label": "enhanced table"
   }, /*#__PURE__*/React__default.createElement(EnhancedTableHead, {
-    classes: classes,
+    headerStyles: classes,
     headCells: headers,
     _order: _order,
     _orderBy: _orderBy,
     onRequestSort: handleRequestSort,
     rowCount: data.length !== undefined ? data.length : 0,
     dispatch: dispatch
-  }), /*#__PURE__*/React__default.createElement(TableBody, null, _isLoading ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(TableCell, {
+  }), /*#__PURE__*/React__default.createElement(TableBody, null, _isLoading ? /*#__PURE__*/React__default.createElement(TableRow, {
+    className: classes.styledTableRow
+  }, /*#__PURE__*/React__default.createElement(TableCell, {
     colSpan: headers.length,
     align: "center"
   }, " ", /*#__PURE__*/React__default.createElement(CircularProgress, null))) : data.length !== 0 ? stableSort(data, getComparator(_order, _orderBy)).slice(_page * _rowsPerPage, _page * _rowsPerPage + _rowsPerPage).map(function (row, index) {
-    return /*#__PURE__*/React__default.createElement(StyledTableRow, {
+    return /*#__PURE__*/React__default.createElement(TableRow, {
       hover: true,
       role: "checkbox",
       tabIndex: -1,
       key: row.id,
-      id: row.id
+      id: row.id,
+      className: classes.styledTableRow
     }, headers.map(function (h, i) {
       if (h.id === 'sr') {
         return /*#__PURE__*/React__default.createElement(TableCell, {
@@ -2325,7 +2333,8 @@ function MkTable(props) {
       },
       size: dense ? "small" : "medium"
     }, /*#__PURE__*/React__default.createElement(EditIcon, null))));
-  }) : /*#__PURE__*/React__default.createElement(StyledTableRow, {
+  }) : /*#__PURE__*/React__default.createElement(TableRow, {
+    className: classes.styledTableRow,
     style: {
       width: '100%'
     }
@@ -2373,7 +2382,8 @@ MkTable.propTypes = {
   onChangePaginatePage: propTypes.any,
   onGetData: propTypes.any,
   onChangeRowPerPage: propTypes.any,
-  dense: propTypes.any
+  dense: propTypes.any,
+  styles: propTypes.any
 };
 
 var useStyles$2 = styles.makeStyles(function (theme) {

dist/index.modern.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { InputBase, Grid, Box, Typography, TextField, NativeSelect, GridList, GridListTile, Dialog, DialogTitle, DialogContent, Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, IconButton, Menu, MenuItem, DialogActions } from '@material-ui/core';
+import { InputBase, Grid, Box, Typography, TextField, NativeSelect, GridList, GridListTile, Dialog, DialogTitle, DialogContent, Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, IconButton, createMuiTheme, ThemeProvider, Menu, MenuItem, DialogActions } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
@@ -1790,19 +1790,9 @@ function stableSort(array, comparator) {
   return stabilizedThis.map(el => el[0]);
 }
 
-const StyledTableCell = withStyles(theme => ({
-  head: {
-    backgroundColor: '#0d47a1a8',
-    color: theme.palette.common.white
-  },
-  body: {
-    fontSize: 14
-  }
-}))(TableCell$1);
-
 function EnhancedTableHead(props) {
   const {
-    classes,
+    headerStyles,
     _order,
     _orderBy,
     onRequestSort,
@@ -1813,7 +1803,24 @@ function EnhancedTableHead(props) {
     onRequestSort(event, property);
   };
 
-  return /*#__PURE__*/React.createElement(TableHead$1, null, /*#__PURE__*/React.createElement(TableRow$1, null, headCells.map(headCell => /*#__PURE__*/React.createElement(StyledTableCell, {
+  const sortedStyle = createMuiTheme({
+    overrides: {
+      MuiTableSortLabel: {
+        root: {
+          "&$active": {
+            color: headerStyles.sortedHeader === undefined ? 'grey' : headerStyles.sortedHeader,
+            "&& $icon": {
+              color: headerStyles.sortedHeader === undefined ? 'grey' : headerStyles.sortedHeader
+            }
+          }
+        }
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: sortedStyle
+  }, /*#__PURE__*/React.createElement(TableHead$1, null, /*#__PURE__*/React.createElement(TableRow$1, null, headCells.map(headCell => /*#__PURE__*/React.createElement(TableCell$1, {
+    className: headerStyles.head,
     key: headCell.id,
     align: headCell.numeric ? 'right' : 'left',
     padding: headCell.disablePadding ? 'none' : 'default',
@@ -1829,33 +1836,30 @@ function EnhancedTableHead(props) {
       whiteSpace: "nowrap"
     }
   }, headCell.label, _orderBy === headCell.id ? /*#__PURE__*/React.createElement("span", {
-    className: classes.visuallyHidden
+    className: headerStyles.visuallyHidden
   }, _order === 'desc' ? 'sorted descending' : 'sorted ascending') : null) : /*#__PURE__*/React.createElement(TableSortLabel, {
     hideSortIcon: "true",
     align: "right"
-  }, headCell.label))), /*#__PURE__*/React.createElement(StyledTableCell, {
+  }, headCell.label))), /*#__PURE__*/React.createElement(TableCell$1, {
+    className: headerStyles.head,
     style: {
       width: '100px'
     }
-  })));
+  }))));
 }
 
 EnhancedTableHead.propTypes = {
-  classes: propTypes.object.isRequired,
+  headerStyles: propTypes.object.isRequired,
   onRequestSort: propTypes.func.isRequired,
   onSelectAllClick: propTypes.func.isRequired,
   _order: propTypes.oneOf(['asc', 'desc']).isRequired,
   _orderBy: propTypes.string.isRequired,
   rowCount: propTypes.number.isRequired
 };
-const useStyles$1 = makeStyles(theme => ({
+const useStyles$1 = makeStyles({
   root: {
     width: '100%'
   },
-  paper: {
-    width: '100%',
-    marginBottom: theme.spacing(2)
-  },
   table: {
     tableLayout: 'fixed'
   },
@@ -1878,19 +1882,19 @@ const useStyles$1 = makeStyles(theme => ({
       b_orderBottom: "none"
     }
   },
-  bomLink: {
-    cursor: "pointer",
-    color: theme.primary,
-    textDecoration: "underline"
-  }
-}));
-const StyledTableRow = withStyles(theme => ({
-  root: {
+  head: props => ({
+    backgroundColor: props.headerBackgroundColor === undefined ? '#0d47a1a8' : props.headerBackgroundColor,
+    color: props.headerTextColor === undefined ? 'white' : props.headerTextColor
+  }),
+  sortedHeader: props => ({
+    color: props.headerTextColor === undefined ? 'grey' : props.headerTextColor
+  }),
+  styledTableRow: props => ({
     '&:nth-of-type(even)': {
-      backgroundColor: '#0d47a11c'
+      backgroundColor: props.primaryColor === undefined ? '#0d47a11c' : props.primaryColor
     }
-  }
-}))(TableRow$1);
+  })
+});
 
 function getUpdatedDate(p) {
   var statusDate = p.updated_date;
@@ -2030,7 +2034,8 @@ ConfirmDialog.propTypes = {
 };
 
 function MkTable(props) {
-  const classes = useStyles$1();
+  console.log("props.styles:", props.styles);
+  const classes = useStyles$1(props.styles);
   const {
     dispatch,
     data = [],
@@ -2129,23 +2134,26 @@ function MkTable(props) {
     size: _dense ? 'small' : 'medium',
     "aria-label": "enhanced table"
   }, /*#__PURE__*/React.createElement(EnhancedTableHead, {
-    classes: classes,
+    headerStyles: classes,
     headCells: headers,
     _order: _order,
     _orderBy: _orderBy,
     onRequestSort: handleRequestSort,
     rowCount: data.length !== undefined ? data.length : 0,
     dispatch: dispatch
-  }), /*#__PURE__*/React.createElement(TableBody$1, null, _isLoading ? /*#__PURE__*/React.createElement(StyledTableRow, null, /*#__PURE__*/React.createElement(TableCell$1, {
+  }), /*#__PURE__*/React.createElement(TableBody$1, null, _isLoading ? /*#__PURE__*/React.createElement(TableRow$1, {
+    className: classes.styledTableRow
+  }, /*#__PURE__*/React.createElement(TableCell$1, {
     colSpan: headers.length,
     align: "center"
   }, " ", /*#__PURE__*/React.createElement(CircularProgress, null))) : data.length !== 0 ? stableSort(data, getComparator(_order, _orderBy)).slice(_page * _rowsPerPage, _page * _rowsPerPage + _rowsPerPage).map((row, index) => {
-    return /*#__PURE__*/React.createElement(StyledTableRow, {
+    return /*#__PURE__*/React.createElement(TableRow$1, {
       hover: true,
       role: "checkbox",
       tabIndex: -1,
       key: row.id,
-      id: row.id
+      id: row.id,
+      className: classes.styledTableRow
     }, headers.map((h, i) => {
       if (h.id === 'sr') {
         return /*#__PURE__*/React.createElement(TableCell$1, {
@@ -2200,7 +2208,8 @@ function MkTable(props) {
       onClick: event => handleRowEdit(row),
       size: dense ? "small" : "medium"
     }, /*#__PURE__*/React.createElement(EditIcon, null))));
-  }) : /*#__PURE__*/React.createElement(StyledTableRow, {
+  }) : /*#__PURE__*/React.createElement(TableRow$1, {
+    className: classes.styledTableRow,
     style: {
       width: '100%'
     }
@@ -2245,7 +2254,8 @@ MkTable.propTypes = {
   onChangePaginatePage: propTypes.any,
   onGetData: propTypes.any,
   onChangeRowPerPage: propTypes.any,
-  dense: propTypes.any
+  dense: propTypes.any,
+  styles: propTypes.any
 };
 
 const useStyles$2 = makeStyles(theme => ({

example/src/components/MkTablePage.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { MkTable } from '@mokkon/reactjs'
 import '@mokkon/reactjs/dist/index.css';
 import { Grid } from '@material-ui/core';
-import theme from '../theme';
+// import theme from '../theme';
 
 function createData(name, calories, fat, carbs, protein) {
   return { name, calories, fat, carbs, protein };
@@ -45,13 +45,16 @@ const MkTablePage = (props) => {
     console.log('handleRowPerPage :', v);
   }
 
+  const styles = { headerBackgroundColor: 'green', headerTextcolor: 'white' , primaryColor:'lightBlue' };
+
   return (
     <div className="root">
       {/*table template */}
       <Grid container>
         <Grid item xs={8}>
           <MkTable
-            theme={theme}
+            // theme={theme}
+            styles={styles}
             headers={headCells}
             data={rows}
             page={page}

src/MkTable/MkTable.js

@@ -11,7 +11,7 @@ import TableSortLabel from '@material-ui/core/TableSortLabel';
 import Typography from '@material-ui/core/Typography';
 import EditIcon from '@material-ui/icons/Edit';
 import ExpandMore from '@material-ui/icons/ExpandMore';
-import { Box, Button, Dialog, DialogActions, DialogTitle, Grid, IconButton, Menu, MenuItem } from '@material-ui/core';
+import { Box, Button, createMuiTheme, Dialog, DialogActions, DialogTitle, Grid, IconButton, Menu, MenuItem, ThemeProvider } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 
@@ -41,69 +41,87 @@ function stableSort(array, comparator) {
     return stabilizedThis.map((el) => el[0]);
 }
 
-const StyledTableCell = withStyles((theme) => ({
-    head: {
-        backgroundColor: '#0d47a1a8',
-        color: theme.palette.common.white,
-    },
-    body: {
-        fontSize: 14,
-    },
-}))(TableCell);
+// const StyledTableCell = withStyles((theme) => ({
+//     head: {
+//         backgroundColor: '#0d47a1a8',
+//         color: theme.palette.common.white,
+//     },
+//     body: {
+//         fontSize: 14,
+//     },
+// }))(TableCell);
 
 
 function EnhancedTableHead(props) {
-    const { classes, _order, _orderBy, onRequestSort, headCells } = props;
+    const { headerStyles, _order, _orderBy, onRequestSort, headCells } = props;
     const createSortHandler = (property) => (event) => {
         onRequestSort(event, property);
         // onGetData();
     };
 
-    return (
-        <TableHead>
-            <TableRow>
-                {headCells.map((headCell) => (
-                    <StyledTableCell
-                        key={headCell.id}
-                        align={headCell.numeric ? 'right' : 'left'}
-                        padding={headCell.disablePadding ? 'none' : 'default'}
-                        sortDirection={_orderBy === headCell.id ? _order : false}
-                        style={{ width: headCell.id === 'sr' ? '15px' : headCell.width ? headCell.width : '' }}
-                    >
-                        {headCell.id !== 'sr' ?
-                            <TableSortLabel
-                                active={_orderBy === headCell.id}
-                                direction={_orderBy === headCell.id ? _order : 'asc'}
-                                onClick={createSortHandler(headCell.id)}
-                                style={{ whiteSpace: "nowrap" }}
-                            >
-                                {headCell.label}
-                                {_orderBy === headCell.id ? (
-                                    <span className={classes.visuallyHidden}>
-                                        {_order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                                    </span>
-                                ) : null}
-                            </TableSortLabel>
-                            : <TableSortLabel
-                                hideSortIcon="true"
-                                align="right"
-                            >
-                                {headCell.label}
-
-                            </TableSortLabel>
+    const sortedStyle = createMuiTheme({
+        overrides: {
+            MuiTableSortLabel: {
+                root: {
+                    "&$active": {
+                        color: headerStyles.sortedHeader === undefined ? 'grey' : headerStyles.sortedHeader,
+                        "&& $icon": {
+                            color: headerStyles.sortedHeader === undefined ? 'grey' : headerStyles.sortedHeader
                         }
+                    }
+                }
+            }
+        }
+    });
 
-                    </StyledTableCell>
-                ))}
-                <StyledTableCell style={{ width: '100px' }} />
-
-            </TableRow>
-        </TableHead>
+    return (
+        <ThemeProvider theme={sortedStyle}>
+            <TableHead>
+                <TableRow>
+                    {headCells.map((headCell) => (
+                        <TableCell
+                            className={headerStyles.head}
+                            key={headCell.id}
+                            align={headCell.numeric ? 'right' : 'left'}
+                            padding={headCell.disablePadding ? 'none' : 'default'}
+                            sortDirection={_orderBy === headCell.id ? _order : false}
+                            style={{ width: headCell.id === 'sr' ? '15px' : headCell.width ? headCell.width : '' }}
+                        >
+                            {headCell.id !== 'sr' ?
+                                <TableSortLabel
+                                    active={_orderBy === headCell.id}
+                                    direction={_orderBy === headCell.id ? _order : 'asc'}
+                                    onClick={createSortHandler(headCell.id)}
+                                    style={{ whiteSpace: "nowrap" }}
+                                >
+                                    {headCell.label}
+                                    {_orderBy === headCell.id ? (
+                                        <span className={headerStyles.visuallyHidden}>
+                                            {_order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                                        </span>
+                                    ) : null}
+                                </TableSortLabel>
+                                : <TableSortLabel
+                                    hideSortIcon="true"
+                                    align="right"
+                                >
+                                    {headCell.label}
+
+                                </TableSortLabel>
+                            }
+
+                        </TableCell>
+                    ))}
+                    <TableCell className={headerStyles.head} style={{ width: '100px' }} />
+
+                </TableRow>
+            </TableHead>
+        </ThemeProvider>
     );
 }
 
 EnhancedTableHead.propTypes = {
-    classes: PropTypes.object.isRequired,
+    headerStyles: PropTypes.object.isRequired,
     onRequestSort: PropTypes.func.isRequired,
     onSelectAllClick: PropTypes.func.isRequired,
     _order: PropTypes.oneOf(['asc', 'desc']).isRequired,
@@ -111,14 +129,10 @@ EnhancedTableHead.propTypes = {
     rowCount: PropTypes.number.isRequired,
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles({
     root: {
         width: '100%',
     },
-    paper: {
-        width: '100%',
-        marginBottom: theme.spacing(2),
-    },
     table: {
         // minWidth: 750,
         tableLayout: 'fixed'
@@ -142,20 +156,27 @@ const useStyles = makeStyles((theme) => ({
             b_orderBottom: "none"
         }
     },
-    bomLink: {
-        cursor: "pointer",
-        color: theme.primary,
-        textDecoration: "underline",
-    }
-}));
-
-const StyledTableRow = withStyles((theme) => ({
-    root: {
+    head: props => ({
+        backgroundColor: props.headerBackgroundColor === undefined ? '#0d47a1a8' : props.headerBackgroundColor,
+        color: props.headerTextColor === undefined ? 'white' : props.headerTextColor,
+    }),
+    sortedHeader: props => ({
+        color: props.headerTextColor === undefined ? 'grey' : props.headerTextColor,
+    }),
+    styledTableRow: props => ({
         '&:nth-of-type(even)': {
-            backgroundColor: '#0d47a11c',
+            backgroundColor: props.primaryColor === undefined ? '#0d47a11c' : props.primaryColor,
         },
-    },
-}))(TableRow);
+    }),
+});
+
+// const StyledTableRow = withStyles((theme) => ({
+//     root: {
+//         '&:nth-of-type(even)': {
+//             backgroundColor: '#0d47a11c',
+//         },
+//     },
+// }))(TableRow);
 
 function getUpdatedDate(p) {
     var statusDate = p.updated_date;
@@ -319,7 +340,8 @@ ConfirmDialog.propTypes = {
 };
 
 function MkTable(props) {
-    const classes = useStyles();
+    console.log("props.styles:", props.styles)
+    const classes = useStyles(props.styles);
     const { dispatch,
         data = [],
         headers = [],
@@ -335,7 +357,7 @@ function MkTable(props) {
         onGetData,
         onUpdateDataRow,
         onChangeRowPerPage,
-        dense = true
+        dense = true,
     } = props;
 
     const [_rowsPerPage, setRowsPerPage] = React.useState(rowsPerPage);
@@ -419,7 +441,6 @@ function MkTable(props) {
     };
 
     return (
-
         <div className={classes.root}>
             <Grid container>
                 <Grid item>
@@ -431,7 +452,7 @@ function MkTable(props) {
                             aria-label="enhanced table"
                         >
                             <EnhancedTableHead
-                                classes={classes}
+                                headerStyles={classes}
                                 headCells={headers}
                                 _order={_order}
                                 _orderBy={_orderBy}
@@ -441,19 +462,20 @@ function MkTable(props) {
                             />
 
                             <TableBody>
-                                {_isLoading ? <StyledTableRow >
+                                {_isLoading ? <TableRow className={classes.styledTableRow}>
                                     <TableCell colSpan={headers.length} align="center"> <CircularProgress /></TableCell>
-                                </StyledTableRow> :
+                                </TableRow> :
                                     (data.length !== 0 ? stableSort(data, getComparator(_order, _orderBy))
                                         .slice(_page * _rowsPerPage, _page * _rowsPerPage + _rowsPerPage)
                                         .map((row, index) => {
                                             return (
-                                                <StyledTableRow
+                                                <TableRow
                                                     hover
                                                     role="checkbox"
                                                     tabIndex={-1}
                                                     key={row.id}
                                                     id={row.id}
+                                                    className={classes.styledTableRow}
                                                 >
 
                                                     {headers.map((h, i) => {
@@ -483,10 +505,10 @@ function MkTable(props) {
                                                         : <TableCell style={{ width: '150px' }} align='right'>
                                                             <IconButton onClick={(event) => handleRowEdit(row)} size={dense ? "small" : "medium"}><EditIcon /></IconButton>
                                                         </TableCell>}
-                                                </StyledTableRow>
+                                                </TableRow>
 
                                             );
-                                        }) : <StyledTableRow style={{ width: '100%' }} />)}
+                                        }) : <TableRow className={classes.styledTableRow} style={{ width: '100%' }} />)}
                             </TableBody>
                         </Table>
                     </TableContainer>
@@ -529,7 +551,8 @@ MkTable.propTypes = {
     onChangePaginatePage: PropTypes.any,
     onGetData: PropTypes.any,
     onChangeRowPerPage: PropTypes.any,
-    dense: PropTypes.any
+    dense: PropTypes.any,
+    styles: PropTypes.any
 };
 
 export default (MkTable);