How resolve zIndex??

[andrestigre]

Version Mui-Datatable : "mui-datatables": "^3.6.0",

On Modal show this is my componente

<React.Fragment>
            <ThemeProvider theme={getMuiTheme} >
                <MUIDataTable
                    title={""}
                    data={
                        data.map((item) => {
                            return [
                                item["codigoBarras"],
                                item["codigoInterno"],
                                item["tipoDescripcion"],
                                item["existencia"],
                                item["pvpiva"],
                            ];
                        })
                    }
                    columns={columns}
                    options={options}
                />
            </ThemeProvider>
        </React.Fragment>

And my Theme

const getMuiTheme = createMuiTheme({
        palette: {
            primary: indigo,
            secondary: green,
        },
        overrides: {
            MuiTable: {
                root: {
                    zIndex: 1400
                }
            },
            MuiPaper: {
                root: {
                    zIndex: 1400
                }
            }
        }
    });

I have import this.

import green from '@material-ui/core/colors/green';
import indigo from '@material-ui/core/colors/indigo';
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import MUIDataTable, { MUIDataTableColumnDef, MUIDataTableOptions } from "mui-datatables";

I try change the zIndex to 2051, etc etc. but i dont have result. any solucion??

[patorjk]

If you create a codesandbox showing the problem I can take a look.

[nryoung]

I was in a similar situation as you. I was able to target the specific CSS class of mui-datatables to override the z-index like so:

const StyledDataTable = styled(MUIDataTable)({
  '& div[class^="MUIDataTable-responsiveBase-"]': {
    zIndex: 0,
  },
});