如何让Bootstrap CSS样式覆盖ReactJS中的样式组件CSS？

Question

我试图在一个简单的React应用程序的自定义样式的组件内使用一些Bootstrap组件，但是我的组件和styled-components全局样式中的CSS都覆盖了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;