Definitive Guide to React Inline Styling

When I'm developing React websites, I always get excited about the styling part. After all, a good user interface can determine if your website will be successful or not.

When it comes to styling in React, we have a multitude of options.

The easiest option to start styling in React is inline styling. Inline styles make use of HTML style attribute.

The style HTML element contains style information for a document or part of a document. It contains CSS, which is applied to the contents of the document containing the style element. (source: MDN)

In this article, you'll learn:

• How to style React components using inline styles
• What are the downsides of inline styling
• What are alternatives to inline styling

Overview of Inline Styling in React

The quickest way to demonstrate how inline styles work in React is with an example.

Let's consider a component that is importing a CSS file to apply styling.

App.jsx

import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <h1>Hello World</h1>
      <h2>I Use CSS!</h2>
    </div>
  );
}

export default App

And the imported CSS.

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
  color: blueviolet;
}

And this is how the same component will be implemented using inline styles.

Component using inline styles

const style = {
  fontFamily: "sans-serif",
  textAlign: "center",
  color: "blueviolet"
};

const App = () => {
  return (
    <div style={style}>
      <h1>Hello World</h1>
      <h2>I Use CSS!</h2>
    </div>
  );
};

export default App;

As we can see from the example above, adding inline styles to React is a simple process. But is it considered bad practice? You'll find out in the next section.

Is Inline Styling Considered Bad?

Now that we know how to use inline styles, let's discuss if you should use them.

As stated in the official React documentation, inline styles are not that performant when compared to CSS.

CSS classes are generally better for performance than inline styles. (source: React)

But if you're just starting out your project, and want to develop fast, inline styles might be a good choice.

Inline styling is a good way to get your project up and running fast. However, as the project grows in size, you'll most likely start to notice the limitations of inline styling.

Limitations of Inline Styling

When you start asking about the inline styling amongst the developers, you'll probably hear a lot of negatives.

This is mostly because of the limitation of inline styles. If you're wondering what they are, we have the answer.

These are the limitations of inline styling:

• They can't be reused.
• They're hard to maintain long-term.
• Not possible to use CSS pseudo-classes.
• Not possible to use advanced CSS selectors.

With that being said, let's look at the alternatives to inline styling.

Alternatives to Inline Styling

When choosing a styling system for React, there are many options or libraries to consider. In this section, we'll list the most popular ones.

As an alternative to inline styling, you can use:

• Pure CSS
• CSS in JS library
• CSS Modules
• CSS Framework
• UX/UI kit

Pure CSS

The most simple option is to use plain CSS. This option requires a good understanding of CSS, but it gives you all the power over the styling part of your application.

Cascading Style Sheets or CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. (source: MDN)

CSS in JS

This is a pattern where the CSS stylesheet is composed using JavaScript. A popular library that uses this pattern is styled-components.

Utilising tagged template literals and the power of CSS, styled-components allows you to write actual CSS code to style your components. (source: Styled components)

CSS Modules

CSS Modules are great for using CSS, and separating scopes between components.

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs and @imports are in module request format. (Source: CSS Modules)

CSS Framework

The last option is to not care about styling at all, and use a ready-to-go solution. A good example of this approach is a CSS framework.

During the last few years, Tailwind CSS gained a lot of popularity, and that's why we're recommending it.

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles, and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero runtime. (source: Tailwind CSS)

Concluding Thoughts

Inline Styling is a way of styling React components. It can be useful for those who want to use CSS with React but don't want to bother with including CSS stylesheets.

Inline styling is a good way to enhance the UI quickly, without any dependencies. However, it comes with limitations. React is aware of these limitations, and they're encouraging us to use styling approaches that are easier to manage.

In this article, you learned how to use inline styles, what are the most common limitations of inline styles. And lastly, you learned the alternatives of inline styles in React.

With this information in mind, you should be able to decide if you want to use inline styles, or not.