覆蓋 material-ui 的 @media 反應組件不起作用

Question

我想在像這些線程這樣的 Material UI 組件上覆蓋@media css（ 如何為 material-ui 覆蓋 @media css 以響應 MuiTab 組件），但是像它這樣的組件不會使用它的媒體查詢在我的情況下工作。 我試圖復制，所以我可以理解它是如何工作的，但到目前為止我沒有看到任何結果。

我想要做的是覆蓋這個控制台中的媒體查詢從'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} />);

Answer 1

沒關系我找到了

我需要把關鍵字覆蓋

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