React-bootstrap is changing my custom css components

Question

I am building an ubereats copy with react. To identically copy the style in key components (such as the navbar and the sidebar) I need to use custom css. I don't need to make an exact copy and I want to save up time, that's when i decided to use React-bootstrap aswell.

To work with react bootstrap I need to have this line in my index.js or App.js, I have it on my index.js :

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

To work with my custom css I have to import those, I have a custom css for my navbar and my sidebar and I am importing the css in the component, in the Navbar:

import './MainNav.css';

I found that if I comment out the line where I import React-bootstrap and run npm start my navbar is displayed according to my css, and, obviously, React-my bootstrap components are unstyled: Page without React-bootstrap min css imported

And if i don't comment out the line where I import React-bootstrap and run npm start my navbar elements are all around the place and I can't manage to restyle them back in the desired position but, obviously my React-bootstrap components are styled accordingly: Page with React-bootstrap min css imported

I haven't been able to find a post related to this problem, how can I fix the compatibility problem?

I have tried with importing import 'bootstrap/dist/css/bootstrap.min.css'; only in those components it is needed but it is all the same.

I installed React-bootstrap via npm and have this versions:

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

I also tried to include bootstrap from CDN by adding this line in my index.html instead of using the import in index.js but i had the same issue:

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

Send help

EDIT: I am including MainNav.css upon request.

    @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;
}

Kyubbbbbb Kyubbbbbb · Accepted Answer · 2020-11-14T22:25:12

Hard to tell without looking at your MainNav.css. So please include your file next time when you ask questions like this. Anyway, my guess is that the class selectors you have in your stylesheet are conflicting with classes defined by Bootstrap.

React-bootstrap is changing my custom css components

1 Answers