Use className in JSX to connect an element to a regular CSS class, then define that class in a stylesheet. Choose React’s style prop when a value depends on JavaScript data, such as an image’s dimensions. React does not prescribe how your project loads CSS, so follow your build tool or framework’s instructions.
Connect a React element to a CSS class
In JSX, write className rather than the HTML attribute class. Its value can match an ordinary CSS selector.
function Card() {
return (
<article className="card">
<h2 className="card__title">Profile</h2>
</article>
);
}.card {
padding: 1rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
}
.card__title {
margin: 0;
font-size: 1.25rem;
}React documents className as the equivalent of the HTML class attribute. See the React common components reference.
Load the CSS file in your project
There is no universal React rule that says every stylesheet must be imported from a component. As React’s Quick Start guide explains, “React does not prescribe how you add CSS files.” Use the method supported by your app’s build tool or framework.
Common bundler convention
In a project whose tooling supports CSS imports, a component or entry file might include:
import './Card.css';This import is a common bundler convention, not JSX syntax or a requirement imposed by React. Check your project’s setup if the import fails.
Plain HTML stylesheet link
For a page where the HTML document loads the stylesheet directly, use a link in the document head:
<link rel="stylesheet" href="/styles.css" />Use the path and placement expected by your project. Frameworks may provide their own stylesheet-loading approach.
React 19 stylesheet components
React 19 can manage stylesheet <link> and <style> components rendered in the tree. A stylesheet link can include precedence so React can order stylesheets in the document head; identical linked stylesheets can be deduplicated. This is a React 19 capability, not the only way to add CSS, and whether it fits depends on the app’s rendering setup. See the React 19 release article.
Choose classes or inline styles
Prefer CSS classes when style values are known ahead of time or should be reused. Classes keep styling in CSS, where you can also use selectors and pseudo-classes. React recommends using the style attribute when styles depend on JavaScript variables.
| Approach | Use it when | Example |
|---|---|---|
| CSS class | Appearance is reusable or based on a known state or selector. | className="card" |
Inline style |
A style value comes from data or a JavaScript variable. | style={{ width: size }} |
Dynamic values with the style prop
The style prop takes a JavaScript object. Use camelCase property names, and pass a number for numeric values where appropriate:
function Avatar({ size }) {
return (
<img
className="avatar"
src="/avatar.png"
alt="Profile"
style={{ width: size, height: size }}
/>
);
}React renders numeric values with px unless the CSS property is unitless. For example, a numeric width becomes a pixel value. Consult the common components reference for style prop details.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchBest Value
TypeScript style objects
When you want to type an inline style object in TypeScript, React documents React.CSSProperties:
import type { CSSProperties } from 'react';
const avatarStyle: CSSProperties = {
width: 48,
height: 48,
};Apply styles conditionally with classes
Build the className string in JavaScript when an element’s appearance changes with its state. Keep the base class and add a modifier for the condition:
import './Card.css';
export default function Card({ selected }) {
return (
<article className={selected ? 'card card--selected' : 'card'}>
<h2 className="card__title">Profile</h2>
</article>
);
}.card--selected {
border-color: royalblue;
box-shadow: 0 0 0 2px royalblue;
}For a small number of conditions, a conditional expression is straightforward. React’s documentation also mentions the optional classnames helper library as a readability aid when composing more complex class strings; it is not required. See React’s guide.
Troubleshoot styles that do not appear
- The browser ignores the class. Confirm that JSX uses
className, and that the CSS selector exactly matches the class string. - The stylesheet import fails. The
import './Card.css'pattern depends on build-tool or framework support. Follow the stylesheet-loading instructions for the project, or load the file through the HTML document if that is the supported setup. - A dynamic value has the wrong unit. Check that the style object uses camelCase names and that the value is appropriate for the property. Numeric values are treated as pixels except for unitless properties.
- A conditional style never changes. Check the boolean or other state used to build
className, then confirm that the modifier class exists in the stylesheet.
Or skip the browser setup
If your goal is to capture how a React page looks rather than configure its styling, ScreenshotNeo can return a screenshot or PDF from one GET request. Its options include waiting for a selector, delay, or network idle, and capturing a full page or a selected element.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for setup and options. Cookie banners, newsletter popups, and chat widgets are removed before capture; bot checks, blank pages, and failed loads are not billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000. Sign up for free.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
