Restyling Bootstrap with Typescript styled component

I have the whole Navbar basically copied from React Bootstrap. I am using Typescript's styled components in my app and I came to the point where I actually don't know how to restyle default style from Bootstrap.

Example (React Bootstrap navabar):

<Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#link">Link</Nav.Link>
      <NavDropdown title="Dropdown" id="basic-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>

Of course each component has to be imported form Bootstrap e.g.

import Navbar from 'react-bootstrap/Navbar';

So I can not import it again from my style.ts, where I would normally styled it. If I would use css, then of course I would give it a className and style based on that, but here is totally different system, in which I am new.

Is there any way how can I customise Bootstrap ?

I also tried React styling style={{color: "pink"}} to implement in elements e.g to Nav.Link, but obviously it doesn't work.