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
You can style it through in-line styling
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!
Top comments (5)
Cool well done so far but you could have add simple example project,it could have make more sense or links with codes,we are devs,we love to read code like language not only plan english text,thanks for your effort be strong💪,i know your next post will be awesome yeaaaaa
Ok bro, i will definitely include codes in my next article, thanks a lot...
Yea great we can't wait hahaha bro💪
Nice. Css Modules is a very good solution. I also love Styled-components that gives the ability to write CSS with JS. Very handful for passing variable or accessing the window element from CSS...
For in-line lovers tailwind is maybe the best option out there
Absolutely, Tailwind is awesome.