How to Set Inline Styles

Jul 13, 2020 • 5 Minute Read

Introduction

Most static websites are built using HTML, CSS, and JavaScript. HTML serves as the markup language, CSS does the styling, and JavaScript handles interactivity. But with the emergence of libraries like React, everything seems to be managed by JavaScript. This shift in the paradigm has led to a new way of thinking about styling.

In React, you can set styles in multiple ways, including using classes, IDs, or inline styles. In this guide, you will learn how to style your components using the inline style method.

Inline Style Overview

Traditionally, you would add inline styles as a string in the style attribute of an HTML element. The style attribute can contain any CSS property.

For example:

      <h1 style="color:green;text-align:center;">Inline Style</h1>

An inline style may be used to apply a specific style to a single element. You should consider switching to adding styles using classes if you see yourself adding the same inline style to multiple elements.

In React, inline styles are not specified as a string. They are defined as an object, which has the camel-cased version of CSS properties as its key, and the value is usually a string representing the style value. If you want to pass styling as a prop or want some conditional styling, you will find yourself in need of inline styling.

Setting Inline Styles in a React Component

In the example in the previous section, you can create a separate component for headings. To specify the styling, use the style prop on the <H1> component.

Specify the style object inside the constructor as follows.

      this.styles = {
  color: "green",
  textAlign: "center",
};
    

Notice here that the text-align CSS property got camel-cased to textAlign.

Pass this styles object to the <H1 /> component, as shown below.

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };
  }

  render() {
    return <H1 style={this.styles}>{this.props.text}</H1>;
  }
}
    

Combine multiple style objects using the spread operator.

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };

    this.fontStyles = {
      fontSize: "32px",
      fontWeight: "bold",
    };
  }

  render() {
    return (
      <H1 style={{ ...this.styles, ...this.fontStyles }}>{this.props.text}</H1>
    );
  }
}
    

You can also use the Object.assign() method to combine multiple styles.

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };

    this.fontStyles = {
      fontSize: "32px",
      fontWeight: "bold",
    };
  }

  render() {
    return (
      <H1 style={Object.assign({}, this.styles, this.fontStyles)}>
        {this.props.text}
      </H1>
    );
  }
}
    

Conditional Styling

Say that you have to decrease the size of the headings based on a prop. Use the ternary (?, :) or logical operators (&& or ||) to conditionally add or remove a style object based on the state or props.

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };

    this.fontStyles = {
      fontSize: "32px",
      fontWeight: "bold",
    };
  }

  render() {
    return (
      <H1
        style={Object.assign(
          {},
          this.styles,
          this.fontStyles,
          this.props.small && { fontSize: "20px" }
        )}
      >
        {this.props.text}
      </H1>
    );
  }
}
    

Add the conditional styling at the end of the default styles, so that the conditional styling does not get overridden by the default ones. Also, for readability, it is best to store any style object in a separate variable or property.

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };

    this.fontStyles = {
      fontSize: "32px",
      fontWeight: "bold",
    };

    this.smallFontSize = this.props.small && { fontSize: "20px" };
  }

  render() {
    return (
      <H1
        style={Object.assign(
          {},
          this.styles,
          this.fontStyles,
          this.smallFontSize
        )}
      >
        {this.props.text}
      </H1>
    );
  }
}
    

Conclusion

This guide can be a starting point for your journey into the realm of styling. To further your learning, try out different styling strategies using classes or third party frameworks like Bulma or Bootstrap. It is generally considered a best practice to separate your UI components from your application's core or business logic. You can also use advanced patterns like CSS modules, styled-components, etc. to style your application. You'll have to do some experimentation to find out which methods work best for you or your team depending on your use case.