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 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How and When to Use Inline Styling in React</h1><div data-node-type="summary" class="summary-block">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.</div><p>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.</p><p>For this article, we assume that you're familiar with React components basics, such as working with component's properties.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>If you're just getting started with React, you may want to look at the <a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer nofollow">React Getting Started</a> for a jump-start or check out <a href="https://www.newline.co/fullstack-react/30-days-of-react/" rel="noopener noreferrer nofollow">30 Days of React</a> for a more structured and detailed course.</p></div></div><h2><a name="what-is-inline-styling">What is Inline Styling</a></h2><p>There are two basic ways to define styling for an element in React.</p><p>The first one is using the <code>className</code> 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 <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class" rel="noopener noreferrer nofollow">class</a></code> attribute of HTML elements. This way, we can define a CSS class and apply it later to multiple elements.</p><p>The second approach is using the <code>style</code> property and is called <strong>inline styling</strong>. This property accepts an object with fields that define the style of a React element. This corresponds to the <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style" rel="noopener noreferrer nofollow">style</a></code> attribute of HTML elements. Using this approach, we define styling for a particular element.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>There are more advanced approaches available, such as <a href="https://reactjs.org/docs/faq-styling.html#what-is-css-in-js" rel="noopener noreferrer nofollow">CSS-in-JS</a> tools, that are out of scope for this article.</p></div></div><p>For example, here are two <code>&lt;div&gt;</code> 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:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-L3zAo" id="cm-L3zAo">import React from "react";
import "./styles.css";

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

  return (
    &lt;div className="App"&gt;
      &lt;div className="box"&gt;with CSS class.&lt;/div&gt;
      &lt;div style={boxStyle}&gt;with inline styling.&lt;/div&gt;
    &lt;/div&gt;
  );
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fub6rr&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fub6rr&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example, we've defined the <code>box</code> CSS class in the separate <code>styles.css</code> CSS file. We start by importing this file to include it in the final bundle. Next, we specify the <code>className</code> property of the first <code>&lt;div&gt;</code> element to use the <code>box</code> class.</p><p>For the second <code>&lt;div&gt;</code> element we've defined the <code>boxStyle</code> object. This object has got properties that define styling to be applied. This object has got properties equal to the <code>box</code> CSS class. We specify this object as a value for the <code>style</code> property of the second <code>&lt;div&gt;</code> element.</p><h2><a name="rules-for-inline-styling">Rules for Inline Styling</a></h2><p>Properties of the <code>style</code> object should be in the <a href="https://wiki.c2.com/?CamelCase" rel="noopener noreferrer nofollow">lower camel case</a>. For example, the <code>backgroundColor</code> corresponds to the CSS <code>border-color</code> attribute and defines the background color, and <code>borderWidth</code> defines a width of the element's border.</p><p>We can use strings and numbers as values of style properties. When using numbers, React will append <code>"px"</code> suffix where applicable. For example, React will add the <code>"px"</code> suffix for the <code>width</code> and <code>fontSize</code> properties, but won't add it for the <code>zIndex</code> and <code>fontWeight</code> properties (as they do not require units).</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>Here is the <a href="https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59" rel="noopener noreferrer nofollow">list of properties</a> for which the suffix won't be applied.</p></div></div><p>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.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>For CSS files there are tools such as <a href="https://github.com/postcss/autoprefixer" rel="noopener noreferrer nofollow">autoprefixer</a> that automate this process. If you're using the <a href="https://create-react-app.dev/docs/post-processing-css/" rel="noopener noreferrer nofollow">Create React App</a> tool, the CSS will be prefixed for you.</p></div></div><p>Also, when working with inline styling you cannot use pseudo selectors such as <code>:hover</code> or <code>:first-child</code>. Media queries are not supported as well.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>If you need to work with pseudo selectors and media queries, you can use CSS classes or additional tools, such as <a href="https://styled-components.com/" rel="noopener noreferrer nofollow">styled-components</a>.</p></div></div><h2><a name="when-to-use-inline-styling">When to Use Inline Styling</a></h2><p>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.</p><p>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.</p><p>In other cases, you may prefer using CSS classes.</p><p>In this example, we allow a user to enter a background color manually:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-LhIf3" id="cm-LhIf3">import React, { useState } from "react";
import "./styles.css";

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

  const boxStyle = {
    backgroundColor: color
  };

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

  return (
    &lt;div className="App"&gt;
      &lt;input type="text" onChange={handleChange} value={color} /&gt;
      &lt;div className="box" style={boxStyle}&gt;
        mix of CSS class and inline styling
      &lt;/div&gt;
    &lt;/div&gt;
  );
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F8mkmc&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F8mkmc&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F8mkmc%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We've defined the <code>box</code> CSS class in the <code>styles.css</code> file that provides basic styling, such as padding and text color. We specify this CSS class with the <code>className</code> property for the <code>&lt;div&gt;</code> element.</p><p>Text entered by a user we save to the <code>color</code> state variable. We use that value as the background color value of the <code>boxStyle</code> object that we pass to the <code>style</code> property of the <code>&lt;div&gt;</code> element.</p><h2><a name="conclusion">Conclusion</a></h2><p>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.</p><p>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 <a href="https://styled-components.com/" rel="noopener noreferrer nofollow">styled-components</a> or <a href="https://emotion.sh/docs/introduction" rel="noopener noreferrer nofollow">emotion</a>.</p><h2><a name="more-resources">More resources</a></h2><ul><li><p><a href="https://reactjs.org/docs/faq-styling.html" rel="noopener noreferrer nofollow">Styling and CSS</a> on the official React site.</p></li><li><p><a href="https://reactjs.org/docs/dom-elements.html#style" rel="noopener noreferrer nofollow">Style property</a> description.</p></li><li><p><a href="https://reactjs.org/docs/faq-styling.html#what-is-css-in-js" rel="noopener noreferrer nofollow">What is CSS-in-JS</a>.</p></li><li><p><a href="https://github.com/MicheleBertoli/css-in-js" rel="noopener noreferrer nofollow">Comparison of tools that help with styling in React</a>.</p></li></ul>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How and When to Use Inline Styling in React

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript