Styling in React: Inline Styles

Introduction

Styling is an important part of building user interfaces in React. React supports multiple ways to apply styles, and one of the simplest methods is inline styling.

Inline styles allow developers to apply CSS directly inside React components using JavaScript objects. This approach is useful for dynamic styling where styles depend on component state or props.

In this article, you will learn what inline styles are, how they work in React, syntax rules, examples, advantages, limitations, and interview questions.

What Are Inline Styles in React?

Inline styles in React are applied using the style attribute, similar to HTML, but with important differences.

In React:

• Styles are written as JavaScript objects
• CSS property names use camelCase
• Values are usually strings

Basic Inline Style Example

function App() {
  return (
    <h1 style={{ color: "blue", fontSize: "24px" }}>
      Welcome to React
    </h1>
  );
}

In this example:

• color and fontSize are written in camelCase
• The style value is an object wrapped in double curly braces

Why React Uses JavaScript Objects for Styles

React uses JavaScript objects for inline styles because:

• JavaScript objects are easier to manipulate
• Styles can be dynamically changed
• They integrate well with component logic

Inline Styles Using Variables

To keep code clean, styles can be stored in variables.

function App() {
  const headingStyle = {
    color: "green",
    backgroundColor: "#f4f4f4",
    padding: "10px"
  };

  return <h1 style={headingStyle}>React Inline Styles</h1>;
}

This approach improves readability and reusability.

Dynamic Inline Styling Using State

Inline styles are often used with state to apply dynamic styles.

import { useState } from "react";

function Theme() {
  const [isDark, setIsDark] = useState(false);

  const themeStyle = {
    backgroundColor: isDark ? "#000" : "#fff",
    color: isDark ? "#fff" : "#000",
    padding: "20px"
  };

  return (
    <div style={themeStyle}>
      <p>Inline Styling in React</p>
      <button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </button>
    </div>
  );
}

This example shows how styles can change based on user interaction.

Inline Styles with Conditional Rendering

function Status({ isActive }) {
  return (
    <span style={{ color: isActive ? "green" : "red" }}>
      {isActive ? "Active" : "Inactive"}
    </span>
  );
}

Inline styles make conditional styling simple and readable.

Important Rules for Inline Styles in React

1. CSS property names must use camelCase Example: backgroundColor instead of background-color

2. Style values must be strings or numbers Example: "20px" or 20

3. You cannot use pseudo-classes like :hover directly

4. Inline styles have higher priority than external CSS

Inline Styles vs CSS Stylesheets

Advantages of Inline Styles

• Easy to apply
• Useful for dynamic styling
• Scoped to the component
• No class name conflicts

Limitations of Inline Styles

• Not suitable for large-scale styling
• No media queries
• No hover or focus states
• Reusability is limited

When to Use Inline Styles

Inline styles are best used when:

• Styles depend on state or props
• Simple, one-time styling is needed
• Quick prototyping is required

For larger projects, CSS modules or styled components are recommended.

Interview Questions and Answers

1. What are inline styles in React?

Inline styles are styles applied directly to JSX elements using JavaScript objects.

2. Why does React use camelCase for inline styles?

Because inline styles are written as JavaScript objects, and JavaScript uses camelCase naming conventions.

3. Can we use CSS pseudo-classes in inline styles?

No, pseudo-classes like hover and focus are not supported in inline styles.

4. Are inline styles better than CSS files?

Inline styles are useful for dynamic styling, but CSS files are better for large and reusable styles.

5. Do inline styles override external CSS?

Yes, inline styles have higher priority than external stylesheets.