Q: How do I use custom Button and Bootstrap Button In a React App for Different Pages? I've been following a tutorial and I want to keep their styling for Buttons and Navbars but I also want to  implement some bootstrap for components such as buttons. However when I import the Buttons from bootstrap their styling is not there. Is there something I can do to fix this?
Also, If I import the bootstrap.min.css file on the signup page, the buttons regain their styling but the whole website is affected by the bootstrap css.
HomepageButton SignupPageButton BootstrapButton
When Bootstrap.min.css Is Imported
Button Component From Tutorial
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>
  );
};

HomePage with Custom Button
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;

Sign Up Page with Bootstrap Button
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 */}
      
      </>
      
      
      );
}


A: Change your Button component name because there is a conflict between your component and the Button component of react-bootstrap (they have the same name).
Also, be careful with class names in your css file. 'btn' is used by react-bootstrap ...
Demo: stackblitz
