React Inline Styling: Syntax, Usage, and Examples

React inline styling allows you to style components using JavaScript objects instead of external stylesheets. This approach is useful when you need dynamic styles that change based on props, state, or user interaction.

How to Apply Inline Styling in React

React inline styles are written as JavaScript objects and applied to elements using the style attribute. Unlike traditional CSS, property names use camelCase instead of hyphenation.

Basic Syntax

function StyledComponent() {
  return (
    <div style={{ color: "blue", fontSize: "20px", padding: "10px" }}>
      Styled with Inline Styles
    </div>
  );
}

Each style rule is written as a key-value pair, with the property name in camelCase and values as strings.

Using a Separate Style Object

For readability, define styles in a variable and apply them to multiple elements.

const headingStyle = {
  color: "purple",
  textAlign: "center",
  fontSize: "24px",
};

function StyledHeading() {
  return <h1 style={headingStyle}>This is a styled heading</h1>;
}

This method keeps JSX clean and makes updating styles easier.

Applying Inline Styles Dynamically

You can dynamically change inline styles based on state or props.

import React, { useState } from "react";

function ToggleColor() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      style={{
        backgroundColor: isActive ? "green" : "red",
        color: "white",
        padding: "10px 20px",
        border: "none",
      }}
      onClick={() => setIsActive(!isActive)}
    >
      {isActive ? "Active" : "Inactive"}
    </button>
  );
}

This example changes the button’s background color when clicked.

When to Use Inline Styling in React

Styling Individual Elements

Inline styles work well for elements that need quick custom styling, like small adjustments to spacing or colors.

Dynamic Styles Based on State or Props

If a component’s appearance changes based on user interaction or props, inline styles offer a direct way to apply those changes.

Avoiding External Stylesheets for Small Components

For small, reusable components, inline styles eliminate the need for separate CSS files, keeping styles self-contained.

Examples of React Inline Styling

React Inline Style Hover Effect

React doesn’t support pseudo-classes like :hover directly in inline styles, but you can achieve similar effects using event handlers.

import React, { useState } from "react";

function HoverEffect() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      style={{
        backgroundColor: isHovered ? "lightblue" : "white",
        padding: "20px",
        border: "1px solid black",
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      Hover over me!
    </div>
  );
}

This approach allows you to replicate hover effects dynamically.

Adding a Background Image with Inline Styles

To set a background image using inline styles, provide the backgroundImage property with a URL.

function BackgroundImageComponent() {
  return (
    <div
      style={{
        backgroundImage: "url('https://example.com/image.jpg')",
        backgroundSize: "cover",
        height: "200px",
        width: "100%",
      }}
    >
      Background Image Example
    </div>
  );
}

Using Inline Styles for Animations

CSS animations can be applied with inline styles using @keyframes in a separate style element or by dynamically setting animation properties.

function AnimatedComponent() {
  const animationStyle = {
    animation: "fadeIn 2s ease-in-out",
  };

  return (
    <>
      <style>
        {`
          @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
          }
        `}
      </style>
      <div style={animationStyle}>Fading In</div>
    </>
  );
}

This method allows you to define animations without an external CSS file.

Learn More About React Inline Styling

Applying Font Styles

React inline styles support font properties like fontSize, fontFamily, and fontWeight.

function StyledText() {
  return (
    <p style={{ fontSize: "18px", fontFamily: "Arial, sans-serif", fontWeight: "bold" }}>
      Custom Font Styling
    </p>
  );
}

Using Inline Styles for Pseudo-Elements

React doesn’t support ::before and ::after directly in inline styles. Instead, use content within a <style> tag and target an element with a class.

function PseudoElementExample() {
  return (
    <>
      <style>
        {`
          .styled::before {
            content: "★ ";
            color: gold;
          }
        `}
      </style>
      <p className="styled">This text has a star before it</p>
    </>
  );
}

Combining Multiple Inline Style Objects

You can merge multiple inline style objects using JavaScript’s spread operator.

const baseStyle = {
  padding: "10px",
  borderRadius: "5px",
};

const primaryStyle = {
  backgroundColor: "blue",
  color: "white",
};

function StyledButton() {
  return <button style={{ ...baseStyle, ...primaryStyle }}>Click Me</button>;
}

Handling Global Styles with Inline Styling

If an application has a consistent theme, store styles in a separate file and import them as objects.

// styles.js
export const buttonStyle = {
  padding: "10px 20px",
  borderRadius: "5px",
  border: "none",
};

// Component.js
import { buttonStyle } from "./styles";

function Button() {
  return <button style={buttonStyle}>Styled Button</button>;
}

This method keeps styles manageable and reusable.

When to Avoid Inline Styles

• If styles are reused across multiple components, external stylesheets or CSS-in-JS libraries might be more practical.
• Large applications with complex styling may become difficult to maintain with inline styles.
• Media queries and pseudo-classes work better with CSS or styled-components.