Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react
inline
styles

How to create inline styles in React

Educative Answers Team

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.​

svg viewer
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')
);

RELATED TAGS

react
inline
styles
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring