HOW TO STYLE YOUR REACT COMPONENT WITH CSS

When I started learning React js newly, I have always wondered how I will style my React js components with CSS. This really made me to be hesitant to learning React js, but I really have to, because I need it for my work as a front-end developer because React js will save you a lot of stress as a developer 😁👨‍💻.

There are two amazing ways to style your React js components with CSS

1. You can style it through in-line styling

2. You can use external styling as well.

THE IN_LINE STYLING
You should be familiar with this kind of styling if you have some experience in HTML and CSS. You can implement this kind of styling by introducing the style attribute in your element but with a little trick, here is the trick. Your style attribute should be like this style={{color:"red",fontSize:"1rem"}}. Hope you have seen the trick here? When I was still new to React js, I made a very silly mistake, I wanted to style my component just like the way we usually do it in HTML 🤣🤣🤣, I regretted my life then because I was so frustrated. But thank God, you won't make such mistake like me, this article will help you out.

THE EXTERNAL STYLING
This kind of styling is also similar to the HTML external styling, but the only difference here is the linking of the style sheet.
Although you have two options here, you can write your CSS styles in the index.css file not the app.css file(you can delete your app.css file to avoid confusion).

Just like the way you select elements in css(with IDs,Class and Tag names). Don't worry about linking it because, it is automatically linked. Every file (more accurately, Components)you will create will receive their styles from the index.css.
If you want a component to have it's own unique styles, you can create a separate CSS file with the usual .css extension and import that file into that component you want to give a unique style. Here is an example

import uniqueStyle from "./unique.css;
I hop you got that correct right 😀? Happy coding!