React JS、HTML、CSS、display：none 不起作用

问：

晚上好，我是 React 的新手，我正在尝试克隆一个现有的模板（UI8 团队的展示）来练习。这是实际外观：

我想做的是使用最大宽度：767px 的媒体查询，我想在其中删除右上角的“Let's Talk”按钮。我在 .nav-buttons：first-child（这是包装两个按钮的类，第一个子项代表“Let's Talk”按钮）中添加了“display： none”，但没有任何变化，按钮仍然出现。我应该错在哪里？

Navbar.jsx：

import './css/Navbar.css';
import RoundedButton from "./RoundedButton";
 
const Navbar = () => {
  const enableOverlay = () => {
    const overlay = document.querySelector('.overlay');
 
    overlay.classList.add('active');
  }
 
  return (
    <nav data-aos="fade-up" data-aos-duration="1000">
      <h2>showcasy.</h2>
 
      <div className="nav-buttons">
        <RoundedButton text="Let's Talk" icon="return-up-forward-outline" invert={false} />
        <RoundedButton func={() => enableOverlay()} text="" icon="menu-outline" invert={false}/>
      </div>
    </nav>
  );
};
 
export default Navbar;

导航栏.css：

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 60px;
}
 
.nav-buttons {
  display: flex;
  align-items: center;
}
 
@media (max-width: 767px) {
  .nav-buttons:first-child {
    display: none !important;
  }
}

RoundedButton.jsx：

import './css/RoundedButton.css';
 
const RoundedButton = ({func, text, icon, invert, whiteBorder}) => {
  return (
    <button
      style={whiteBorder && invert ? {border: "1px solid #fff"} : null}
      onClick={func != null ? func : null}
      className={`custom-btn ${invert ? "invert" : ""}`}
      type="button">{text} {icon !== "" ? <ion-icon name={icon}></ion-icon> : null}
    </button>
  )
}
 
export default RoundedButton;

RoundedButton.css：

.custom-btn {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  color: #030712;
  background: linear-gradient(to left, white 50%, black 50%) right;
  background-size: 200%;
  transition: .5s ease-in-out;
  border: 1px solid #030712;
  outline: none;
  padding: 12px 24px;
  margin: 0 8px;
  border-radius: 100px;
}
 
.custom-btn:hover {
  color: #ffffff;
  background-position: left;
}
 
.custom-btn.invert {
  color: #ffffff;
  background: linear-gradient(to left, #030712 50%, white 50%) right;
  background-size: 200%;
}
 
.custom-btn.invert:hover {
  color: #030712;
  border: 1px solid #030712;
  background-position: left;
}

我以为它可能是圆形按钮的显示弯曲（我用它来对齐文本和按钮的图标），但我试图删除它，但仍然不起作用。