Как мне позволить стилю Bootstrap CSS переопределить мой стилизованный компонент CSS в ReactJS?

Question

Я пытаюсь использовать некоторые Bootstrap компоненты внутри компонента с индивидуальным стилем в простом приложении React, но CSS как из моего компонента, так и styled-components Global Style переопределяют стиль Bootstrap, чего я действительно не хочу. Есть ли способ просто не применять стиль к этой части моего приложения, чтобы отображалось Bootstrap CSS?

Вот мой стилизованный компонент меню с раскрывающимся списком Bootstrap:

import React from 'react';
import { Dropdown, DropdownButton } from 'react-bootstrap';
import { bool } from 'prop-types';
import { StyledMenu } from './Menu.styled';

const Menu = ({ open }) => {
  return (
    <StyledMenu open={open}>
      <DropdownButton id="dropdown-basic-button" title="Dropdown button">
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </DropdownButton>

      <!-- some other links and things below that use the default StyledMenu styles -->

    </StyledMenu>
  )
}

И вот мое основное приложение с примененным глобальным стилем:

import React, { useState, useRef } from 'react';
import { ThemeProvider } from 'styled-components';
import { GlobalStyles } from './global';
import { theme } from './theme';
import { Menu } from './components';

function App() {
  const [open, setOpen] = useState(false); // menu should be hidden initially
  const node = useRef();
  useOnClickOutside(node, () => setOpen(false));

  return (
    <ThemeProvider theme={theme}>
      <>
        <GlobalStyles />
        <div>
          <!-- ... main body ... -->
        </div>
        <div ref={node}>
          <!-- here's the Menu component within the main app -->
          <Menu open={open} setOpen={setOpen} />
        </div>
      </>
    </ThemeProvider>
  );
}

export default App;