How To Use Inline Styles in ReactJS?

Inline styles in React allow you to directly apply CSS styles to elements using the style attribute. This is often used for dynamic styling, where styles need to be applied based on the component's state or props. Inline styles in React are written as JavaScript objects.

Each CSS property is camelCased, and the values are provided as strings. This method is particularly useful for applying styles conditionally or dynamically, as it allows you to compute styles based on component state or props.

These are the following approaches used for showing inline styles in React.js:

Steps to Create a React App

Step 1: Initialize the project from terminal using the command.

npx create-react-app my-app

Step 2: Navigate to the project folder using the command.

cd my-app

Folder Structure

Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

1. Using the style Attribute Directly

You can apply styles directly in the JSX by using the style attribute. This method is straightforward and useful for simple, static styles.

Syntax

const MyComponent = () => {
    return <div style={{ color: 'red', fontSize: '20px' }}>Hello, World!</div>;
};

Example: In this example, the div element is styled with a red color and a font size of 20 pixels.

import React from 'react';

const MyComponent = () => {
	return <div style={{ color: 'red', fontSize: '20px' }}>
		Hello, World!</div>;
};

export default MyComponent;

Output

2. Storing Styles in a Variable

Store the styles in a variable and then use that variable in the style attribute. This approach is useful when you have multiple elements that need the same styles or when you want to make your styles more readable.

Syntax

const MyComponent = () => {
    const myStyles = {
        color: 'green',
        fontSize: '18px',
  };

  return <div style={myStyles}>Geeks For Geeks</div>;
};

Example: In this example, the styles are stored in a myStyles variable and then applied to the div element.

import React from 'react';

const MyComponent = () => {
	const myStyles = {
		color: 'green',
		fontSize: '18px',
	};

	return <div style={myStyles}>Geeks For Geeks</div>;
};

export default MyComponent;

Output

3. Using Inline Styles with Dynamic Properties

You can use JavaScript expressions to dynamically set styles, which is useful when styles need to change based on component props or state.

Syntax

const MyComponent = ({ fontSize }) => {
    return <div style={{ color: 'purple', fontSize: `${fontSize}px` }}>Hello, World!</div>;
};

Example: In this example, the font size of the div element is set dynamically based on the fontSize prop.

import React from 'react';

const MyComponent = ({ fontSize }) => {
	return <div style={{
		color: 'purple',
		fontSize: `${fontSize}px`
	}}>Hello GFG</div>;
};

export default MyComponent;

Output