Material Ui - медиа-запросы не имеют никакого эффекта / медиа-запросы не работают

Question

Возникла проблема с медиа-запросами пользовательского интерфейса. Все остальные стили, которые я применил к компоненту из моих «стилей. js», работают / работают как ожидалось. Тем не менее, медиа-запросы не имеют никакого эффекта. Вот соответствующий код (вырезанный из файла большего размера) с соответствующим кодом стиля ниже.

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',
  },
},