Bipin Rajbhar
Posted on October 31, 2020
There are two primary ways to style a React Component.
- Inline CSS with
style
prop. - External CSS with
className
prop.
style
prop
In HTML you pass CSS as a String
.
<p style="margin-top: 10; color: red;">Something went wrong.</p>
In React, you have to pass CSS as a Object
.
<p style={{marginTop: 10, color: "red"}}>Something went wrong.</p>
In the React
{{
and}}
is actually a combination of JSX express and an Object express.In React the property name of the style prop is
camelCase
instead ofkebab-cased
.
className
prop
In HTML you apply a class name to an element using the class
attribute.
<p class="error-message">Something went wrong.</p>
In React you apply a class name to an element using the className
attribute.
<p className="error-message">Something went wrong.</p>
My name is Bipin Rajbhar and I am a software engineer at QuikieApps, and you can follow or connect to me on Twitter and Linked In
Resources
The Beginner's Guide to React
Epic React
💖 💪 🙅 🚩
Bipin Rajbhar
Posted on October 31, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.