重大Ui-媒体查询无效/媒体查询已损坏

Question

Material UI媒体查询存在问题。我从“ styles.js”应用于组件的所有其他样式都在按预期方式工作/正在成为appleid。但是，媒体查询没有任何作用。这是相关的代码（从较大的文件中删除），下面是相关的样式代码。

class MainPage extends React.Component {

render() {

    const { classes } = this.props;

    return (
        <>
            <div className={classes.navContainer}>

                <div className={classes.navContainerLogo}>
                    <img className={classes.logo} src={glock}></img>
                    <p className={classes.navBarText}>Navigate Here</p>
                </div>

                <div className={classes.navContainerButtons}>
                    <Button variant="outlined" href="#home">Home </Button>
                    <Button variant="outlined" href="#news">News </Button>
                    <Button variant="outlined" href="#contact">Contact </Button>
                </div>

            </div>

...（为了简洁起见）...和CSS：

mainHeading: {
    color: '#333',
    display: 'flex',
    justifyContent: 'center',
    fontFamily: 'Roboto',
    fontSize: '80px',
    fontWeight: '100',
    height: '85px',
    letterSpacing: '-3.0px',
    marginTop: '48px',
    paddingTop: '45px',
    [theme.breakpoints.down('md')]: {
      fontSize: '14px',
      color: 'red',
  },
},