React-bootstrap 正在更改我的自定義 css 組件

Question

我正在用 React 構建一個 ubereats 副本。 要在關鍵組件（例如導航欄和側邊欄）中相同地復制樣式，我需要使用自定義 css。我不需要進行精確復制，我想節省時間，那時我決定使用 React-引導程序也是如此。

要使用 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的行，我的導航欄元素到處都是，我無法設法將它們重新設置為所需的樣式 position 但是，顯然我的 React-bootstrap 組件樣式相應：導入 React-bootstrap min css 的頁面

我找不到與此問題相關的帖子，我該如何解決兼容性問題？

我試過導入import 'bootstrap/dist/css/bootstrap.min.css'; 只有在那些組件中才需要它，但它們都是一樣的。

我通過 npm 安裝了 React-bootstrap 並且有這個版本：

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

我還嘗試通過在我的 index.html 中添加這一行而不是在 index.js 中使用導入來包含來自 CDN 的引導程序，但我遇到了同樣的問題：

   <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 定義的類沖突。