Year-End Discount: 10% OFF 1-year and 20% OFF 2-year subscriptions!

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

Tired of LeetCode? 😩

Learn the 24 patterns to solve any coding interview question without getting lost in a maze of LeetCode-style practice problems. Practice your skills in a hands-on, setup-free coding environment. 💪

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

Tired of LeetCode? 😩

Learn the 24 patterns to solve any coding interview question without getting lost in a maze of LeetCode-style practice problems. Practice your skills in a hands-on, setup-free coding environment. 💪

Keep Exploring
Related Courses