Styling React Components

A marks report should make its title easy to find and its result easy to read. React describes the elements, while CSS rules determine their appearance. Styling is still a browser responsibility.

Use className to attach CSS classes to JSX elements. Alternatively, the style prop accepts an object for individual inline styles. Neither approach changes the component’s data flow; appearance and behavior are separate decisions.

Explain
Apply a CSS class with className and understand where its rules live.
Trace
Use a style object when a value depends on component data.
Apply
Explain a mark’s meaning in text as well as through color.

Component Styling: follow the relationship

Name the class
The report article has className="report".
Match CSS rules
The .report rule adds padding and a border; its heading rule chooses a color.
Style the report
The browser applies those rules while the report text keeps its meaning.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Build the mental model

A class is a reusable styling hook, useful when many elements share appearance. Inline styles are convenient for a small value calculated from data. This lesson includes its stylesheet inside a style element so every shown example is complete without an unprovided CSS file.

Keep presentation understandable

A report should still make sense if its stylesheet loads slowly or is unavailable. Meaningful text and semantic structure provide that foundation. CSS can establish spacing and hierarchy, but the source order should already follow a sensible reading sequence for keyboard and assistive-technology users.

Inline styles cannot express every CSS feature, such as hover selectors or media queries. A stylesheet becomes appropriate as presentation grows. If a future CSS Module is used, its file must exist and be imported through a supporting build tool; this lesson avoids that extra dependency.

Read the complete React example

The CSS selector .report styles the article, and .report h1 styles its heading. The JSX className matches that selector. In the practice, backgroundColor is camel-cased because the style value is a JavaScript object, not a CSS string.

React · JavaScript with JSX

import React from 'react';
export default function App() {
  return <main><style>{'.report { padding: 16px; border: 2px solid navy; } .report h1 { color: navy; }'}</style><article className="report"><h1>Asha's report</h1><p>Total: 75</p></article></main>;
}

Expected screen and behavior

Initial screen: Asha's report Total: 75

Connect the source to the screen

React · main example

import React from 'react';
export default function App() {
  return <main><style>{'.report { padding: 16px; border: 2px solid navy; } .report h1 { color: navy; }'}</style><article className="report"><h1>Asha's report</h1><p>Total: 75</p></article></main>;
}

The browser applies the CSS cascade after React supplies the elements. Class names do not create scoped styles automatically: a global .report rule can match another element with that class. Choose useful names and understand selector reach before making a shared stylesheet.

Avoid the common mistakes

A numeric inline width is normally interpreted as pixels, but some properties such as fontWeight accept unitless numbers. Use explicit strings for percentages. Color must not be the only way to communicate pass or fail; show meaningful text as well.

Practice before reading the solution

React · starting example

import React from 'react';
export default function App() {
  return <main><style>{'.report { padding: 16px; border: 2px solid navy; } .report h1 { color: navy; }'}</style><article className="report"><h1>Asha's report</h1><p>Total: 75</p></article></main>;
}

Style a passing student report and keep the result understandable without color.

Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.

Worked practice solution

The practice pairs green styling with the word Passed. A reader using a monochrome display or assistive technology can still understand the result. The padding and border help grouping but do not substitute for headings and semantic structure.

React · JavaScript with JSX

import React from 'react';
export default function App() {
  return <article style={{ padding: 16, backgroundColor: '#e5f6e8', color: '#173d20' }}><h1>Asha's result</h1><p>Passed: 75 marks</p></article>;
}

Expected screen and behavior

Initial screen: Asha's result Passed: 75 marks

Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.

Use the idea in the next lesson

Use className to attach CSS classes to JSX elements. Alternatively, the style prop accepts an object for individual inline styles. Neither approach changes the component’s data flow; appearance and behavior are separate decisions.

Continue with Passing Props to Components. Revisit JSX: Describing the Interface when the relationship between inputs and the resulting screen needs another look.

Read the primary reference: React documentation on Styling React Components.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Passing Props to Components →

Styling React Components