React-bootstrap 正在更改我的自定义 css 组件

Question

我正在用 React 构建一个 ubereats 副本。要在关键组件（例如导航栏和侧边栏）中相同地复制样式，我需要使用自定义 css。我不需要制作精确的副本，我想节省时间，那时我决定也使用 React-bootstrap。

要使用 React bootstrap，我需要在我的 index.js 或 App.js 中包含这一行，我在我的 index.js 中有它：

import 'bootstrap/dist/css/bootstrap.min.css';

要使用我的自定义 css，我必须导入它们，我有一个自定义 css 用于我的导航栏和侧边栏，我正在导入组件中的 css，在导航栏中：

import './MainNav.css';

我发现如果我注释掉导入 React-bootstrap 和运行 npm start 的行，我的导航栏会根据我的 css 显示，并且，显然，React-my bootstrap 组件是无样式的： Page without React-bootstrap min css imported

如果我不注释掉我导入 React-bootstrap 和运行 npm start 的行，我的导航栏元素到处都是，我无法管理将它们重新调整回所需位置，但显然我的 React-bootstrap 组件已相应调整样式： Page with React-bootstrap min css imported

我没能找到与此问题相关的post，我该如何解决兼容性问题？

我试过只在需要的那些组件中导入 import 'bootstrap/dist/css/bootstrap.min.css';，但都是一样的。

我通过 npm 安装了 React-bootstrap 并且有这个版本：

"react": "^17.0.0",
"react-bootstrap": "^1.4.0",

我还尝试通过在 index.html 中添加这一行而不是在 index.js 中使用导入来从 CDN 中包含 bootstrap，但我遇到了同样的问题：

   <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

发送帮助

编辑：我应要求包括 MainNav.css。

    @import url(//db.onlinewebfonts.com/c/11469c307f0de6481e3a04cc5d54ae93?family=Uber+Move+Text);
 :root {
     --font-family: sans-serif;
     font-size: 16px;
     --color-green: #06c167;
     --color-grey: #eee;
     --color-greyDarker: #545454;
}
 * {
     box-sizing: border-box;
}
 @font-face {
     font-family: "Uber Move Text";
     src: url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.eot");
     src: url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.woff") format("woff"), url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/11469c307f0de6481e3a04cc5d54ae93.svg#Uber Move Text") format("svg");
}
 .smallText {
     font-size: 0.7rem;
     font-weight: 300;
     font-family: "Uber Move Text";
}


.logo h1 span {
     font-weight: 900;
     color: var(--color-green);
     font-size: 24px;
}


 .general input {
     font-family: sans-serif;
     font-size: 15px;
     font-weight: bold;
     font-family: "Uber Move Text";
}
.logo {
     font-weight: 300;
     color: white;
     font-family: "Uber Move Text";
}
.logo {
     font-weight: 600;
     color: var(--color-green);
     font-family: "Uber Move Text";
}

 input {
     border: rgb(41, 41, 41);
     border-width: 2px;
     border-bottom-style: solid;
     font-size: 16px;
     padding: 10px;
     background: rgb(240, 240, 240);
     color: #000;
     letter-spacing: 1px;
     font-family: "Uber Move Text";
     text-align: left;
     width: 120%;
}

 .navbarform {
     margin-left: 50%;
     margin-right: auto;
}

.tosidebar {
    margin-right: 3%;
}

.navbar {
    margin-bottom: 20px;
    width: 100%;
}

.linkto{
    text-decoration: none;
}

.linkto:visited { text-decoration: none; color:black; }
.linkto:hover { text-decoration: none; color:black; }
.linkto:focus { text-decoration: none; color:black; }
.linkto:hover, a:active { text-decoration: none; color:black }

.logout {
    font-size: 20px;
}

Answer 1

不看你的 MainNav.css 就很难分辨。因此，下次您提出此类问题时，请附上您的文件。无论如何，我的猜测是您在样式表中的 class 选择器与 Bootstrap.

定义的 classes 冲突

React-bootstrap 正在更改我的自定义 css 组件

React-bootstrap is changing my custom css components

html

css

twitter-bootstrap

reactjs

react-bootstrap