覆盖 material-ui 的@media react componentd 不起作用

Question

我想覆盖 Material UI 组件上的 @media css 就像这些线程 ( and Override components like MuiTab that use media queries)，但它不起作用就我而言。我试图复制，所以我可以理解它是如何工作的，到目前为止我还没有看到任何结果。

我想做的是将此控制台中的媒体查询从 'diplay: none' 覆盖为 'diplay: inline-flex'但并非全部有效

我该如何解决这个问题？

我这样做是为了覆盖

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

在 return 部分：

 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 1

没关系我找到了

我需要覆盖关键字

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

覆盖 material-ui 的@media react componentd 不起作用

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

javascript

css

media-queries

reactjs

material-ui