ReactJS项目中Hero Section按钮不显示问题求助

我正在开发一个Web应用，目标是搭建简洁UI。参考多篇教程整合内容后，导航栏的显示和按钮功能都正常，但首页Hero Section里的按钮完全不显示。我试过修改CSS文件，也排查了能找到的所有步骤，还是解决不了问题。以下是我的代码：

HeroSection.css #

.hero-container {
  
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
  object-fit: contain;
}

.hero-container > h1 {
  color: #fff;
  font-size: 100px;
  margin-top: -100px;
}

.hero-container > p {
  margin-top: 8px;
  color: #fff;
  font-size: 32px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
}

.hero-btns {
  margin-top: 32px;
}

.hero-btns .btn {
  margin: 6px;
}

.fa-play-circle {
  margin-left: 4px;
}

@media screen and (max-width: 960px) {
  .hero-container > h1 {
    font-size: 70px;
    margin-top: -150px;
  }
}

@media screen and (max-width: 768px) {
  .hero-container > h1 {
    font-size: 50px;
    margin-top: -100px;
  }

  .hero-container > p {
    font-size: 30px;
  }

  .btn-mobile {
    display: block;
    text-decoration: none;
  }

  .btn {
    width: 100%;
  }
}

HeroSection.js #

import React from 'react';
import '../App.css';
import { Button } from './Button';
import './HeroSection.css';

function HeroSection() {
  return (
    <div className='hero-container'>
      
      <h1>HI</h1>
      <p>What are you waiting for?</p>
      <div className='hero-btns'>
        <Button
          className='btns'
          buttonStyle='btn--outline'
          buttonSize='btn--large'
        >
          GET STARTED
        </Button>
        <Button
          className='btns'
          buttonStyle='btn--primary'
          buttonSize='btn--large'
          onClick={console.log('hey')}
        >
          CLICK <i className='far fa-play-circle' />
        </Button>
      </div>
    </div>
  );
}

export default HeroSection;

Button.js #

import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';

const STYLES = ['btn--primary', 'btn--outline'];

const SIZES = ['btn--medium', 'btn--large'];

export const Button = ({
  children,
  type,
  onClick,
  buttonStyle,
  buttonSize,
  className
}) => {
  const checkButtonStyle = STYLES.includes(buttonStyle)
    ? buttonStyle
    : STYLES[0];

  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];

  return (
    <Link to='/sign-up' className={`btn-mobile ${className}`}>
      <button
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
        onClick={onClick}
        type={type}
      >
        {children}
      </button>
    </Link>
  );
};

Button.css #

:root {
    --primary: #fff;
}

.btn{
    padding: 8px 20px;
    border-radius: 2px;
    outline: none;
    border: none;
    cursor: pointer;
}

.btn--primary{
    background-color: var(--primary);
    color: #242424;
    border: 1px solid var(--primary)

}

.btn--outline{
    background-color: transparent;
    color : #fff;
    padding: 8px 20px;
    border: 1px solid var(--primary);
    transition: all 0.3s ease-out;

}

.btn--medium{
    padding: 8px 20px;
    font-size: 20px;

}
.btn--large{
    padding: 12px 26px;
    font-size: 20px;
}

.btn--medium:hover, 
.btn--large:hover{
    background: #fff;
    color: #242424;
    transition: all 0.3s ease-out;

}

排查与修复建议 #

1. 检查元素状态：打开浏览器开发者工具（F12），定位到.hero-btns容器，查看内部的Link和button元素是否存在。若元素存在但不可见，检查样式中的display、opacity、visibility、color属性是否被异常覆盖。
2. 修复className传递逻辑：原Button组件未接收并使用外部传入的className，导致btns类无法生效，修改Button.js，在Link标签上添加${className}（如上述代码所示）。
3. 修正Link标签默认样式：若全局样式（如App.css）对a标签设置了display: none或其他隐藏样式，会导致按钮容器被隐藏。给.btn-mobile添加默认显示样式：

   .btn-mobile {
     display: inline-block;
     text-decoration: none;
   }
   

4. 测试基础按钮功能：临时在HeroSection.js中替换Button组件为普通button标签，例如：

   <button className='btn btn--outline btn--large'>GET STARTED</button>
   

   若能显示，说明问题出在Button组件的逻辑或样式上；若仍不显示，检查HeroSection的布局和全局样式冲突。
5. 引入Font Awesome图标库：你使用了far fa-play-circle图标，但未引入对应库时图标不会显示（按钮文字应正常显示），可通过CDN或npm安装引入该库解决图标问题。

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