← Back to all tutorials
React TutorialEpisode 6

Adding Styles

Learn different ways to add CSS styles to your React components.

There are several ways to style React components.

External Stylesheets

/* index.css */
.navbar {
  padding: 20px;
  background: #f1356d;
}

// App.js
import "./index.css";

Inline Styles

<a href="/create"
  style={{
    color: "white",
    backgroundColor: "#f1356d",
    borderRadius: "8px"
  }}
>New Blog</a>

Dynamic Styles

const isActive = true;
<div style={{
  opacity: isActive ? 1 : 0.5
}}>Content</div>