React导航栏按钮@media display:none不生效，求排查问题原因

我正在使用React开发导航栏，尝试理解其运行机制。目前遇到一个问题：无法为按钮应用@media规则中的display:none属性。

样式代码 #

export const NavBtn = styled.nav`
  display:flex;
  align-items: center;
  background:red;
  margin-left:-20%;

  @media screen and(max-width:768px){
      display:none;
  }
`

export const NavBtnLink = styled(LinkR)`
  border-radius:50px;
  background:black;
  white-space:nowrap;
  padding: 10px 22px;
  color:white;
  font-size:16px;
  outline:none;
  border:none;
  transition: all 0.2s ease-in-out;
  text-decoration:none;

  &:hover{
      transition: all 0.2s ease-in-out;
      background:white;
      color:green;
  }

  @media screen and(max-width:768px){
      display:none;
  }
`

结构代码 #

<...>
</NavMenu>
<NavBtn>
    <NavBtnLink to="/book">
        Book a session
    </NavBtnLink>
</NavBtn>
</NavbarContainer>

问题出在媒体查询的语法错误：and与后面的条件括号之间缺少空格，导致浏览器无法识别该媒体查询规则。

CSS规范要求，@media规则里and和后续的(max-width:768px)之间必须有空格，否则整个媒体查询会被判定为无效。

修正后的样式代码 #

export const NavBtn = styled.nav`
  display:flex;
  align-items: center;
  background:red;
  margin-left:-20%;

  // and后添加空格，修复媒体查询语法
  @media screen and (max-width:768px){
      display:none;
  }
`

export const NavBtnLink = styled(LinkR)`
  border-radius:50px;
  background:black;
  white-space:nowrap;
  padding: 10px 22px;
  color:white;
  font-size:16px;
  outline:none;
  border:none;
  transition: all 0.2s ease-in-out;
  text-decoration:none;

  &:hover{
      transition: all 0.2s ease-in-out;
      background:white;
      color:green;
  }

  // and后添加空格，修复媒体查询语法
  @media screen and (max-width:768px){
      display:none;
  }
`

修改后，当屏幕宽度≤768px时，按钮会正常隐藏。

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