When I add new HTML code to my React app , the CSS styles from the App.css file aren't applying anymore , until I retype Import './App.css'" in the head.
Any solution please.
Add a comment
|
2 Answers
Problem solved , it was about bootstrap .
Import bootstrap/dist/css/bootstrap.min.css before App.css .
I was doing the opposite .
1 Comment
Imran Rafiq Rather
Dear friend , You never mentioned you were using any third party CSS library in your Questions :) Anyways, happy coding friend. So, what was happening in your case was, App.css styles were getting override from classes in Bootstrap :) cool. As per your question asked @Rachid, I have answered it earlier. If it has helped you in any way or form, do please accept it as it takes encourages me to help more and more developers :) Thank You
All our components in React act like modules and have their data (variables, functions) private to them. To access code or styles from other files we need import from other modules.
Our App.js is also one such component. Until you do import './App.css', the CSS will not be applied to App.js.
7 Comments
Rachid L'harime
So I just have to delete and retype
import './App.css' everytime I edit the HTML code in App.js ? doesn't seem like a sweet solution
Grant
Why would you be deleting it? You leave the import statement in your top level file
Rachid L'harime
thats the problem in the first place . I am leaving the import and the CSS won't applied until I retype it. @Grant
Grant
@RachidL'harime There could be a few reasons why that is happening, we would need to know more details about your individual case, i.e share some code with us, it could even be a build issue with your current tools but we won't be able to diagnose it any further without more information
Imran Rafiq Rather
@Rachid: Bro, There are few ways to include CSS in our React. 1 is keep everything in index.css file, second is using Same named CSS file as your component and then importing in that component. Which you are trying to do.
|