Styling React Components

Bipin Rajbhar - Oct 31 '20 - - Dev Community

There are two primary ways to style a React Component.

  1. Inline CSS with style prop.
  2. 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>
Enter fullscreen mode Exit fullscreen mode

In React, you have to pass CSS as a Object.

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

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>
Enter fullscreen mode Exit fullscreen mode

In React you apply a class name to an element using the className attribute.

<p className="error-message">Something went wrong.</p>
Enter fullscreen mode Exit fullscreen mode

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

. . . . . . . . . . . . . . . . . . . . . . . . .