Override an @media for material-ui react component…

i’d like to override a @media css on a Material UI component like these threads (How to over-ride an @media css for a material-ui react component and Override components like MuiTab that use media queries), but it doesn’t to work in my case. I tried to replicate, so I can understand how it works behind and I see no results so far.

What I wanted to do is override the media query in this console from ‘diplay: none’ to ‘diplay: inline-flex’ but it doesn’t work all

How can I fix this?

I did this to override

const theme = createMuiTheme({
  MuiTabs: {
    scrollButtonsDesktop: {
      '@media (max-width: 599.95px)': {
        display: 'inline-flex',
      },
    },
  },
});

In the return section:

 return (
    <React.Fragment>
      <Box m={5}>
        <ThemeProvider theme={theme}>
          <Grid container justify="center" alignItems="flex-start">
            <StyledTabs variant="scrollable" value={filterEvent} onChange={handleChangeEvent} aria-label="styled tabs example">
              <StyledTab label="AAAAAAAA" value="Hiking" />
              <StyledTab label="AAAAAAAA" value="Hiking" />
              <StyledTab label="AAAAAAAA" value="Hiking" />
              <StyledTab label="AAAAAAAA" value="Hiking" />
              <StyledTab label="AAAAAAAA" value="Hiking" />
              <StyledTab label="AAAAAAAA" value="Hiking" />
              <StyledTab label="AAAAAAAA" value="Hiking" />
            </StyledTabs>
          </Grid>
        </ThemeProvider>
      </Box>
    </React.Fragment>
  );
};

styledtabs

const StyledTabs = withStyles({
  indicator: {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    '& > span': {
      maxWidth: 80,
      width: '100%',
      backgroundColor: 'black',
    },
  },
})((props) => <Tabs {...props} TabIndicatorProps={{ children: <span /> }} />);

const StyledTab = withStyles((theme) => ({
  root: {
    textTransform: 'none',
    color: '#000',
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: theme.typography.pxToRem(18),
    '&:focus': {
      opacity: 1,
    },
  },
}))((props) => <Tab disableRipple {...props} />);

Answer

Nevermind I found it

I need to put the keyword overrides

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      scrollButtonsDesktop: {
        '@media (max-width: 599.95px)': {
          display: 'inline-flex',
        },
      },
    },
  },
});```

Override an @media for material-ui react componentd doesn’t work

Advertisement

Answer