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

【问题标题】：Override an @media for material-ui react componentd doesn't work覆盖 @media 的 material-ui react componentd 不起作用
【发布时间】：2021-08-20 02:58:53
【问题描述】：

我想在像这些线程（How to over-ride an @media css for a material-ui react component 和Override components like MuiTab that use media queries）这样的 Material UI 组件上覆盖 @media css，但在我的情况下它不起作用。我试图复制，所以我可以理解它背后的工作原理，但到目前为止我没有看到任何结果。

我想要做的是覆盖此控制台中的媒体查询从 'diplay: none' 到 'diplay: inline-flex' 但它不起作用全部

我该如何解决这个问题？

我这样做是为了覆盖

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

在返回部分：

 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>
  );
};

样式标签

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} />);

【问题讨论】：

标签： javascript css reactjs material-ui media-queries

【解决方案1】：

没关系，我找到了它

我需要把关键字覆盖

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

【讨论】：