如何在React App中为不同页面使用自定义按钮和自举按钮? [英] How do I use custom Button and Bootstrap Button In a React App for Different Pages?

问题描述

我一直在关注一个教程，我想保留它们对Buttons和Navbars的样式，但是我也想为按钮等组件实现一些自举.但是，当我从引导程序导入按钮时，它们的样式不存在.有什么我可以解决的吗?

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?

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

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.

首页按钮 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按钮注册页面

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 */}
      
      </>
      
      
      );
}

推荐答案

更改您的Button组件名称，因为您的组件与react-bootstrap的Button组件(它们具有相同的名称)之间存在冲突.

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).

此外，请注意CSS文件中的类名."btn"由react-bootstrap使用...

Also, be careful with class names in your css file. 'btn' is used by react-bootstrap ...

演示: stackblitz

这篇关于如何在React App中为不同页面使用自定义按钮和自举按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！