Override MUIDatatable-responsiveBase

[ShedrackGodson]

I need help on how to override the default style of the div tag just before the table tag to set overflow to none instead of auto. The div has a class of MUIDatatable-responsiveBase.

Tech	Version
Material-UI Core	4.12.4
MUI-datatables	4.2.2
React	17.0.1
browser	Chrome, Firefox, Opera

[danieladugyan]

I encountered the same problem, although I wanted to set it to overflow: 'visible'. This did the trick.

const theme = createTheme({
  components: {
    MUIDataTable: {
      styleOverrides: {
        responsiveBase: {
          overflow: 'hidden',
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

[ShedrackGodson]

Thanks for the reply, I defined my theme as

const customTheme = createTheme({
    components: {
        MUIDataTable: {
            styleOverrides: {
                responsiveBase: {
                    overflow: 'none',
                },
            },
        }
    }
});

but it still overflow, when I inspect the elements I see this CSS style

.tss-eyk1ae-MUIDataTable-responsiveBase.tss-eyk1ae-MUIDataTable-responsiveBase {
    overflow: none; /** this is stroke with the caution that it is invalid property value **/
}

and also there is that default style

.tss-eyk1ae-MUIDataTable-responsiveBase {
    overflow: auto;
}

where am I getting wrong, any help will be appreciated, Thanks

[danieladugyan]

I made a few mistakes in my original answer. I have corrected my original answer and made a sandbox that shows a working example. https://codesandbox.io/s/mui-datatables-override-css-x6kfgn

As you noted, none is not a valid value for overflow. See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow for a list of valid values.

Hope it works now!

[tm1981]

hi i run into this, i am using typescript and its complain that 'responsiveBase' does not exist in type 'Partial<OverridesStyleRules<"caption" | "root" | "liveAnnounce" | "paper" | "responsiveScroll" | "tableRoot", "MUIDataTable", unknown>>'

any idea how to fix this ?