What is Inline Styling in React?

Introduction To Inline Styling In React?

Styling plays an important role in our applications. It makes our component beautiful and enhances the user experience. React inline styling provides the easiest and fastest way to add styles to our UI.

React inline styling refers to applying CSS properties directly to elements within a component using JavaScript object syntax. You don’t need to use any external stylesheets or CSS classes for styling.

React follows CSS camelCase notation rather than CSS kebab-case.

Let’s understand the difference between camelCase and kebab-case

We write property names with hyphens (-) in normal CSS like:

background-color: red;
text-align: center;
font-size: 20px;

But in React inline styling, we write the same property names using camelCase:

Remove the hyphen
Make the second word’s first letter capital in styling

style={{
  backgroundColor: "red",
  textAlign: "center",
  fontSize: "20px"
}}

Now, we will understand by practical code how inline styling works in React.

Inline Styling Syntax In JSX

JSX inline styling is different from regular HTML inline styling.

We pass a JavaScript object in this styling like:

elementName style={{ propertyName: 'value', anotherProperty: 'value' }}

This is a real example of JSX inline styling:

<h1 style={{ color: 'blue', fontSize: '20px' }}>Hello JSX!</h1>

Double curly braces: The outer {} is for JSX expression, and the inner {} is the JavaScript object.
String values: Values (like ’20px’, ‘red’) are written as strings.
Numeric values: You can skip quotes for numbers (e.g., width:100 means 100px).

Applying Multiple Style Attributes

How to Pass Multiple CSS Properties In React Inline Styling?

you can include multiple styles inside the object by separating them with commas.

<div style={{ fontSize: '18px', margin: '10px', textAlign: 'center' }}>
  Multiple styles applied!
</div>

Use Variables For JSX Inline Styling

We can write inline style using a variable for cleaner and reusable code.

const boxStyle = {
  fontSize: '18px',
  margin: '20px auto',
  textAlign: 'center',
  color: 'yellow',
  backgroundColor: '#f2f2f2',
  padding: '12px',
  borderRadius: '9px',
};

function Box() {
  return <div style={boxStyle}>Stylish Box</div>;
}

First, we created a variable to store all the CSS styles, and then used that variable as the value for the style prop. This method is useful when you want to reuse the same style in multiple places.”

What Is Dynamic Styling In React?

Dynamic styling means changing React component styles while the app is running

Dynamic styling changed in different conditions, for example:

Showing error text in red color and a success message in green color.
Changing the button color when the user clicks on it.

We can use State, Props, and Dynamic class names for dynamic styling.

Dynamic Inline Styling Using State

import React, { useState } from 'react';

function StatusToggle() {
  const [buttonOn, setButtonOn] = useState(false);

  const toggleStyle = {
    backgroundColor: buttonOn ? 'seagreen' : 'darkgray',
    color: '#fff',
    padding: '12px 24px',
    border: 'none',
    borderRadius: '6px',
    cursor: 'pointer',
  };

  return (
    <button style={toggleStyle} onClick={() => setButtonOn(!buttonOn)}>
      {buttonOn ? 'Enabled' : 'Disabled'}
    </button>
  );
}

In this code:

BackgroundColor changes according to the StatusToggle() State.
Turnery operator used inside the style object.
Button label are dynamic.

Dynamic Styling With Props

function AlertBox({ type }) {
  const style = {
    color: type === 'error' ? 'red' : 'green',
    fontWeight: 'bold',
    padding: '10px',
  };

  return <div style={style}>{type === 'error' ? 'Error!' : 'Success!'}</div>;
}

In this code:

First we declare the component.
It receives one Prop > “type“
If the type is error, color will be red. otherwise, it will be green.

Dynamic Class Names (CSS + JSX)

We can use external CSS in inline styling

function Status({ isOnline }) {
  return (
    <div className={isOnline ? 'online' : 'offline'}>
      {isOnline ? 'Online' : 'Offline'}
    </div>
  );
}

This is the external CSS file:

.online {
  color: green;
}
.offline {
  color: red;
}

Understand this code: We use a ternary operator in this code,

isOnline is a prop, passed to the Status component.
If false, it shows “Offline”.
If true, it shows “Online”.
The className dynamically changes.

Why Use Inline Styling in React?

Read the advantages of inline style:

Component-Based Styling: We can directly apply styles in components to prevent conflicts with other components.
Conditional Styling: Inline styles can easily be modified by state or props.
Quick Prototyping: Inline styles are useful for small components where external stylesheets are unnecessary.

Combining Multiple Inline Style Objects

Learn how to combine multiple inline styles in JavaScript:

const baseStyle = {
  padding: '10px',
  color: 'black',
};

const additionalStyle = {
  backgroundColor: 'lightyellow',
  fontWeight: 'bold',
};

function CombinedStyledComponent() {
  const combinedStyle = { ...baseStyle, ...additionalStyle };

  return (
    <div style={combinedStyle}>
      <h3>This component has combined inline styles!</h3>
    </div>
  );
}

In this example, you can see that baseStyle and additionalStyle are combined using the spread operator.

What Is Inline Styling In React?