custom styles are not applying

[ShedrackGodson]

I have followed guides on https://www.npmjs.com/package/mui-datatables#customize-styling on how to customize styles but my custom styles are not applying.

I am trying to reduce the Table Header Height

    import {createTheme, ThemeProvider} from "@material-ui/core/styles";
    import {CacheProvider} from "@emotion/react";
    import createCache from "@emotion/cache";

    const muiCache = createCache({
        "key": "mui",
        "prepend": true
    });

    const customTheme = createTheme({
        components: {
            TableHead: {
                styleOverrides: {
                    root: {
                        padding: "5px"
                    },
                    footer: {
                        border: "1px solid #000000"
                    }
                }
            }
        }
    })

  <CacheProvider value={muiCache}>
        <ThemeProvider theme={customTheme}>
            <MUIDataTable
                data={data}
                columns={columns}
                options={options}
            />
        </ThemeProvider>
    </CacheProvider>

Can you guys help me out, it is so important, Thanks

[auraloglu]

I think you should rename TableHead to MuiTableHead

[anishkumar23-01]

I tried like this and it is working for me.

const getMuiTheme = () =>
  createTheme({
    components: {
      // @ts-ignore
      MUIDataTable: {
        styleOverrides: {
          root: {
            boxShadow: 'none'
          }
        }
      },
      MUIDataTableBodyRow: {
        styleOverrides: {
          root: {
            borderLeft: '1px solid #fdfdfd'
          }
        }
      },
      MuiToolbar: {
        styleOverrides: {
          root: {
            backgroundColor: '#f8f8f8'
          }
        }
      },
      MuiTableHead: {
        styleOverrides: {
          root: {
            backgroundColor: '#F1F1F1'
          }
        }
      },
      MuiTableCell: {
        styleOverrides: {
          head: {
            fontSize: '12px'
          },
          root: {
            fontSize: '12px'
          }
        }
      },
      MUIDataTableSelectCell: {
        styleOverrides: {
          headerCell: {
            backgroundColor: '#F1F1F1',
            visibility: 'hidden',
            height: '20px'
          }
        }
      },
      MUIDataTableHeadCell: {
        styleOverrides: {
          data: {
            fontWeight: 500,
            fontSize: '12px',
            height: '10px',
            lineHeight: '12.5px'
          },
          root: {
            backgroundColor: '#F1F1F1'
          }
        }
      }
    }
  });