How to create inline styles in React

React lets you add CSS inline styles that are written as attributes and passed to elements. With inline styles, you have the option to combine CSS syntax with JSX code.

Note: Using the style attribute as your primary means of styling elements is generally ​not​ recommended.​

Inline CSS allows us to combine CSS syntax with JSX code.
Inline CSS allows us to combine CSS syntax with JSX code.

Syntax

In React, inline styles are not specified as a string. Instead, they are specified with an object whose key is the style name, written in camelCase, and whose value is the style’s value, which is usually a string.

We can create inline styles in two ways:

  • By creating a variable that stores style properties and then passing that variable to the element, like style={styleVariable}.
  • By passing the styling directly, like style={{height: '10%'}}.

Code

The following code creates inline CSS styles by directly passing the styling as an object:

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved