我一直在关注一个教程，我想保留按钮和导航栏的样式，但我也想为按钮等组件实现一些引导程序。但是，当我从引导程序导入按钮时，它们的样式不存在。我能做些什么来解决这个问题吗？

此外，如果我在注册页面上导入 bootstrap.min.css 文件，按钮会重新获得样式，但整个网站都会受到 bootstrap css 的影响。

HomepageButton SignupPageButton BootstrapButton 导入Bootstrap.min.css时

来自教程的按钮组件

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

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

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

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

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

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

带有自定义按钮的主页

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

function HeroSection() {
  return (
    
    <div className='hero-container'>
      <video src='/videos/video.mp4' autoPlay loop muted />
      <h1>HELLO</h1>
      {/* <p>What are you waiting for!</p> */}
      <div className='hero-btns'>
        <Button
          className='btns'
          buttonStyle='btn--outline'
          buttonSize='btn--large'
        >
          GET STARTED
        </Button>
        
      </div>
    </div>
  );
}

export default HeroSection;

带有 Bootstrap 按钮的注册页面

import React from 'react';
/* import '../App.css';*/



/* import { Button } from '../components/Button';  */

import {Button} from 'react-bootstrap';


export default function SignUp() {
  return(
      <> 
      <h1 className='sign-up'>Sign Up</h1> { /*This Keeps Its styling*/ }
      <Button className= "py-3" variant="success" href="/">Hello</Button> {/* This does not keep its styling */}
      
      </>
      
      
      );
}