Styling Components in React: CSS & Inline Styles

Styling Components in React

What Are the Options?

React gives you several ways to style components. Beginners should learn the first two.

1. External CSS files

Create a CSS file and import it into the component.

src/components/CourseCard.css

.course-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.course-title {
  font-size: 18px;
  margin: 0 0 8px 0;
}

src/components/CourseCard.jsx

import "./CourseCard.css";

function CourseCard() {
  return (
    <div className="course-card">
      <h3 className="course-title">React Fundamentals</h3>
      <p>12 lessons · Beginner</p>
    </div>
  );
}

export default CourseCard;

2. Inline styles

Pass a JavaScript object to the style attribute.

function StatusBadge() {
  const badgeStyle = {
    backgroundColor: "#2e7d32",
    color: "white",
    padding: "4px 10px",
    borderRadius: "4px"
  };

  return <span style={badgeStyle}>Completed</span>;
}

How It Works

• CSS property names become camelCase: background-color → backgroundColor, font-size → fontSize.
• Values are strings: padding: "4px 10px".
• Numbers without units are treated as pixels: width: 200 becomes 200px.
• The double braces in style={{ color: "red" }} are not special syntax — the outer braces mean "JavaScript goes here" and the inner braces are the object.

When to Use Which

Inline styles cannot use pseudo-classes like :hover or media queries. Keep them for dynamic values only.

// A good use of inline styles — the width depends on data
<div style={{ width: `${progress}%` }} className="progress-fill"></div>