在 React 中覆盖 Bootstrap 类

Question

So this is my folder structure:

I want to override navbar class in bootstrap/navbar.scss and apply the changes to react bootstrap component imported in Navbar.js. I imported bootstrap in _costum.scss like its prescribed in react-bootstrap docs.

 @import '~bootstrap/scss/bootstrap';
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap; // allow us to do the line break for collapsing content
  align-items: center;
  justify-content: space-between; // space out brand from logo
  padding-top: $navbar-padding-y;
  padding-right: $navbar-padding-x; // default: null
  padding-bottom: $navbar-padding-y;
  padding-left: $navbar-padding-x; // default: null
  @include gradient-bg();

  $navbar-padding-y: 3rem;
}

And here is my navbar.scss: @use 'costum'; And here is the Navbar.js code:

import { Nav, Navbar, Container } from 'react-bootstrap';
import { BsSearch } from 'react-icons/bs';
import './navbar.scss';

const MainNav = () => {
  return <Fragment>
    <Navbar expand="lg">
  <Container>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mx-auto " >
        <Nav.Link href="/">HOME</Nav.Link>
        <Nav.Link href="/fahrzeugangebote/">FAHRZEUGANGEBOTE</Nav.Link>
        <Nav.Link href="/finanzierung/">FINANZIRUNG</Nav.Link>
        <Nav.Link href="/fahrzeugankauf/">FAHRZEUGANKAUF</Nav.Link>
        <Nav.Link href="/galerie/">GALERIE</Nav.Link>
        <Nav.Link href="/kontakt/">KONTAKT</Nav.Link>
        <Nav.Link>< BsSearch/></Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>
  </Fragment>;
};

export default MainNav;```


But padding-top didnt change at all. Can someone help me?

Answer 1

why don't you just create a file in home directory like for my example i used index.scss

and import the bootstrap library from the node modules in the index.css

@import "../node_modules/bootstrap/scss/bootstrap.scss";

and put your changes before the @import

see this example