0

I deployed my node js + react app to heroku and for some odd reason some css styles are being overwritten by bootstrap style. (the font too) This worked just fine in development. I am using separate css files for each react component.

What can be the cause? I noticed that this problem is only with the App.css file. The rules there are being overwritten by bootstrap rules.

How would you suggest to debug this?

enter image description here

Ovidiu G
  • 1,253
  • 5
  • 25
  • 47

1 Answers1

2

There are a few options...

First make sure you link to the bootstrap css before your own styles

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="mystyle.css"/>

CSS applies rules based on how important it reads the code. Including more specific selectors makes css more likely to apply the style. Applying style to an id will apply over applying the style to just an a element.

Using inheritance can also give a style more importance. If you have an li class .nav-item inside a nav tag, using nav>.nav-item will apply the style.

There is also an !important flag in css, so you could use text-align: center !important. This will override any styles. That being said, !important is a poor development practice so I would not recommend using it, especially if there are multiple developers working on your project. See this answer

rileyjsumner
  • 523
  • 1
  • 8
  • 21
  • I include bootstrap css in index.html file and the main css file I include it in index.js (which is the main app file). Where the index.css goes then? – Ovidiu G Aug 01 '18 at 15:59
  • I solved this issue by installing bootstrap using npm and then including it in the main react app file. Doing so, there were no changes visible on heroku and after some time I figure why not just restart heroku dynos and that updated the app and solved the problem. – Ovidiu G Aug 01 '18 at 16:24