Im building a react application which has two pages(two react components) so far. My main issue here is that for each component i want there to be an external css file for it, but once there are two css files one files over writes the code in the other. For example, I have a homepage class which has some html code and is being routed to by the App.js file. I want to style my homepage component with a css file called home_style, this works fine if there is only one css file. Once i create another css file for that for my other component, it overwrites the code for the first css file(home_style) and ends up being applied for both my components. I had the idea of having all the code in one css file and set ids for each html component to be able to reference it properly, but i want to know if there is a better way to accomplish this.
1 Answer
Importing different css files into your js file doesn't mean it will only affect this js file only. In React, A css file is global, so you need to encapsulate your css with a parent :
// component1.js
const Component1 = () => {
return (
<div className="component1">
<span className="red">This is the component 1</span>
</div>
)
}
// component2.js
const Component2 = () => {
return (
<div className="component2">
<span className="red">This is the component 2</span>
</div>
)
}
Here I use the same class red in my two components. So in my css, if I want these same classes to do different things, i'll need to encapsulate it (as you said) :
//component1.css
.component1 .red {
color: red;
}
// component2.css
.component2 .red {
background-color: red;
}
Importing my css files or just writing this in a global css file will work, but if you are looking for some other solution, you can ahve a look at Styled components or JSS (These are just examples, there is multiple solutions to manage css in React, like simply using SCSS for easier encapsulation).
