CSS styling in React and mistakes React Newbie Make

I have been Coding React for barely 4 months now and I must say I’m happy to see how I am getting along with it and every other thing to scale up my skills and see that I become better.

I have been on some developers group and have seen some code Newbies complain about their CSS styling not working and most times when I step in to see what the problem was so that I can offer a solution, I came to notice that most of the time they just mistake the React CSS format and then get the whole thing highly messed up. But it’s fine, right? yeah, it is. When you mess up and have it fixed back makes you a stronger developer.

In Reactjs the various types of ways of styling CSS which includes the:
Inline CSS.
Internal or Embedded CSS.
External CSS.

still remains the same except the formats which now changed when styling React Components. So in React, we have ways of Styling components like using:
1. Inline CSS
2. External CSS
3. CSS in Js
4. Styled Components

And other ways too, I’m yet to know all since I’m still learning. So doing my beginning start of coding in react I came to find out ways of styling in React using inline CSS
<p style=”padding-top: 2em”>
Normal inline CSS
</p>

<p style{{paddingTop: 2em}}>
inline CSS in React
</p>

Then in most cases, individuals might decide to have their CSS file in a separate file like in the App.css or other custom file name. This method is highly important for people building a large application.

Normally when you want to style something like
<div>
<h1>Hello world</h1>
<p>Just messing up </p>
</div>

you have to give it a “class” and go to the CSS file and style those elements inside the <div> tag
Example:
<div class=”content”>
<h1>Hello world</h1>
<p>Just messing up </p>
</div>

But in React there is no much difference, just replace the “class” with “className” because “class” is a reserved word in Reactjs. Then style

.content {
color: blue;
text-align: center;
}

So, I hope I was able to make sense in this article. I hope I did. There will more to come for React developers as I learn how too code and write contents to help tell people how to get it done

Written by

Mr.JayDev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store