Styling React Components

#react #beginners #tutorial #webdev

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 of kebab-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

Top comments (5)

Alex K. • Oct 31 '20 • Edited

Hi, I think you'd update your example and fix the quotes:

<p style={{marginTop: 10, color: "red"}}>Something went wrong.</p>

The css styles that you pass to the rules need to be a string or number so instead of color: red it is color: "red".
Also I think the correct spelling is kebab-case ;)

Hope this helps!

Bipin Rajbhar • Oct 31 '20 • Edited

Thanks a lot 😅.

Michael Kantz • Oct 31 '20

Nice article.
Though I do not think inline CSS is a primary way to style React component - it is not a recommended approach.
Also, you have more ways like css-in-js and css-modules.