One simple way to apply styles in React is by using inline styles, similar to how styles are added to HTML elements using the style attribute.

The key difference is that in React, the value of the style attribute is a JavaScript object, not a CSS string.

Here's an example of applying inline styles directly inside JSX:

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

In this example, the h1 element receives styles through the style attribute, which contains a JavaScript object.

Important Rules for Inline Styles

When using inline styles in React, keep the following rules in mind:

• CSS property names with two or more words must use camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Values are usually written as strings: "32px", "red", "rebeccapurple";
• Some properties can accept numbers directly: fontWeight: 700.

These rules exist because inline styles are written in JavaScript, not plain CSS.

Inline Styles as a Separate Object

To keep JSX cleaner and easier to read, inline styles can be stored in a separate JavaScript object and then passed to the style attribute.

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

When to Use Inline Styles

Inline styles work best for:

• Small components;
• Dynamic styles;
• Quick visual tweaks.

They are not ideal for large layouts or complex styling, which is why external CSS is often preferred.