How and When to Use Inline Styling in React

In this article, we will look at a way to style React elements called inline styling. We will learn when to use it and what alternative approaches are available.

Styling in React applications is a large topic with lots of nuances. In this article, we will look at the basic styling approach called inline styling. Also, we will look at styling using CSS classes and will compare these two approaches. You will learn what inline styling is, how and when to use it.

For this article, we assume that you're familiar with React components basics, such as working with component's properties.

If you're just getting started with React, you may want to look at the 

 for a more structured and detailed course.

There are two basic ways to define styling for an element in React.

 property of a React element to define CSS classes for it. We define a string with a space-separated list of classes. This corresponds to the 

 attribute of HTML elements. This way, we can define a CSS class and apply it later to multiple elements.

. This property accepts an object with fields that define the style of a React element. This corresponds to the 

 attribute of HTML elements. Using this approach, we define styling for a particular element.

There are more advanced approaches available, such as 

 tools, that are out of scope for this article.

 elements that look the same. The first one has got styles applied with a CSS class and the second one has got inline styling applied:

import React from "react";
import "./styles.css";

export default function App() {
  const boxStyle = {
    backgroundColor: "#7719aa",
    color: "#ffffff",
    margin: "20px",
    padding: 20
  };

  return (
    <div className="App">
      <div className="box">with CSS class.</div>
      <div style={boxStyle}>with inline styling.</div>
    </div>
  );
}

 CSS file. We start by importing this file to include it in the final bundle. Next, we specify the 

 object. This object has got properties that define styling to be applied. This object has got properties equal to the 

 CSS class. We specify this object as a value for the 

 attribute and defines the background color, and 

 defines a width of the element's border.

We can use strings and numbers as values of style properties. When using numbers, React will append 

 suffix where applicable. For example, React will add the 

 properties (as they do not require units).

An important thing to keep in mind is that properties for inline styling are not autoprefixed. If you need to support older browsers with inline styles, you need to provide vendor-specific attributes yourself.

 that automate this process. If you're using the 

Also, when working with inline styling you cannot use pseudo selectors such as 

. Media queries are not supported as well.

If you need to work with pseudo selectors and media queries, you can use CSS classes or additional tools, such as 

The inline styling has got limited applicability in modern React applications. A valid choice for it would be if you need to dynamically apply a unique style depending on a component's state.

For example, if we allow a user to select a color or a text size dynamically, it won't be feasible to define a CSS class for each case. In this case, we can use a CSS class for basic styling and add unique settings with inline styling.

In other cases, you may prefer using CSS classes.

In this example, we allow a user to enter a background color manually:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [color, setColor] = useState("#7719aa");

  const boxStyle = {
    backgroundColor: color
  };

  const handleChange = event => {
    setColor(event.target.value);
  };

  return (
    <div className="App">
      <input type="text" onChange={handleChange} value={color} />
      <div className="box" style={boxStyle}>
        mix of CSS class and inline styling
      </div>
    </div>
  );
}

 file that provides basic styling, such as padding and text color. We specify this CSS class with the 

 state variable. We use that value as the background color value of the 

Styling in React applications is a large and complex topic. In this article, we've seen how we can use inline styling to dynamically apply styling to a particular element.

In other cases, it is recommended to use CSS classes. Also, if you're working with large React applications or building reusable components, you may benefit from styling tools such as 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

How and When to Use Inline Styling in React

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript