为何我的Media Query无法正确生效？仅最后声明的样式始终生效

无论屏幕尺寸如何，只有最后声明的Media Query样式会被应用。比如下面的示例组件中，哪怕屏幕宽度仅为320px，标题文本的颜色始终是绿色。

断点定义 #

const size = {
    mobileM: '400px',
    mobileL: '480px',
    tablet: '760px',
    laptop: '1280px', 
    desktopM: '1530px',
    desktopL: '1920px',
};

export const devices = {
    mobileM: `(min-width: ${size.mobileM})`,
    mobileL: `(min-width: ${size.mobileL})`,
    tablet: `(min-width: ${size.tablet})`,
    laptop: `(min-width: ${size.laptop})`,
    desktopM: `(min-width: ${size.desktopM})`,
    desktopL: `(min-width: ${size.desktopL})`
};

示例组件 #

import React from 'react'
import styled from 'styled-components'
import { devices } from '../utils/breakpoints';

function Welcome() {
  return (
    <>
      <HeaderMessage>Welcome</HeaderMessage>
      <BodyText>
        这份问卷用于帮助我们了解你的业务目标与需求，从而为你打造最优解决方案。
      </BodyText>
      
      <BodyText>
        请尽可能详细地填写答案，这能让我们更深入地掌握信息，进而更好地为你提供帮助。
      </BodyText>
      
      <BodyText>
        你可随时点击左上角的返回箭头回到之前的页面修改答案。
      </BodyText>
    </>
  )
}

// font-family: 'Krona One', sans-serif;
// font-family: 'Montserrat', sans-serif;

const HeaderMessage = styled.h1`
  color: #BA3D9C;
  text-transform: uppercase;
  font-family: 'Krona One', sans-serif;
  font-size: 6rem;
  letter-spacing: .5rem;
  margin-top: -13vw;
  margin-bottom: 5rem;
  @media ${devices.mobileM} {
    margin-top: 0;
    color: turquoise;
  }
  
  @media ${devices.mobileL} {
    color: blue;
    font-size: 5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  @media ${devices.tablet}{
    color: green;
    font-size: 4rem;
    margin-top: 1rem;
  }
`;

在上述组件中，即便屏幕宽度为320px，标题文本的颜色始终显示为绿色。

内容的提问来源于stack exchange，提问作者Christoper Chamberlain