Important Update

The Guide Feature will be discontinued after December 15th, 2023. Until then, you can continue to access and refer to the existing guides.

Gaurav Singhal

How to Set Inline Styles

Gaurav Singhal

Jul 13, 2020
5 Min read
8,790 Views

Jul 13, 2020
5 Min read
8,790 Views

Web Development

Front End Web Development

Client-side Framework

React

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:

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

html

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.

1this.styles = {
2  color: "green",
3  textAlign: "center",
4};

jsx

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

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

1import React from "react";
2
3class Heading extends React.Component {
4  constructor(props) {
5    super(props);
6
7    this.styles = {
8      color: "green",
9      textAlign: "center",
10    };
11  }
12
13  render() {
14    return <H1 style={this.styles}>{this.props.text}</H1>;
15  }
16}

jsx

Combine multiple style objects using the spread operator.

1import React from "react";
2
3class Heading extends React.Component {
4  constructor(props) {
5    super(props);
6
7    this.styles = {
8      color: "green",
9      textAlign: "center",
10    };
11
12    this.fontStyles = {
13      fontSize: "32px",
14      fontWeight: "bold",
15    };
16  }
17
18  render() {
19    return (
20      <H1 style={{ ...this.styles, ...this.fontStyles }}>{this.props.text}</H1>
21    );
22  }
23}

jsx

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

1import React from "react";
2
3class Heading extends React.Component {
4  constructor(props) {
5    super(props);
6
7    this.styles = {
8      color: "green",
9      textAlign: "center",
10    };
11
12    this.fontStyles = {
13      fontSize: "32px",
14      fontWeight: "bold",
15    };
16  }
17
18  render() {
19    return (
20      <H1 style={Object.assign({}, this.styles, this.fontStyles)}>
21        {this.props.text}
22      </H1>
23    );
24  }
25}

jsx

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.

1import React from "react";
2
3class Heading extends React.Component {
4  constructor(props) {
5    super(props);
6
7    this.styles = {
8      color: "green",
9      textAlign: "center",
10    };
11
12    this.fontStyles = {
13      fontSize: "32px",
14      fontWeight: "bold",
15    };
16  }
17
18  render() {
19    return (
20      <H1
21        style={Object.assign(
22          {},
23          this.styles,
24          this.fontStyles,
25          this.props.small && { fontSize: "20px" }
26        )}
27      >
28        {this.props.text}
29      </H1>
30    );
31  }
32}

jsx

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.

1import React from "react";
2
3class Heading extends React.Component {
4  constructor(props) {
5    super(props);
6
7    this.styles = {
8      color: "green",
9      textAlign: "center",
10    };
11
12    this.fontStyles = {
13      fontSize: "32px",
14      fontWeight: "bold",
15    };
16
17    this.smallFontSize = this.props.small && { fontSize: "20px" };
18  }
19
20  render() {
21    return (
22      <H1
23        style={Object.assign(
24          {},
25          this.styles,
26          this.fontStyles,
27          this.smallFontSize
28        )}
29      >
30        {this.props.text}
31      </H1>
32    );
33  }
34}

jsx

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.

LEARN MORE