Simple Styling Techniques For React Elements

Click to share! ⬇️

Styling your React components is an important part of creating a useful and meaningful user experience. In addition, those building blocks determine the way a product or brand feels and looks. In React, like in most things web development, there are more than a few ways to solve the challenge. We’ll look at two simple ways to deal with the problem of styling React components, however, you may find ways that are more in line with your preferences. Let’s style a few elements in React now.

Adding Style With className

Inside of JSX, we can apply a style to elements. Since JSX compiles down to JavaScript, however, you can not use the regular class keyword as an attribute. Instead, you need to use className as an attribute to style any elements in JSX. JavaScript already has its own class keyword, so if you try to use it you will get errors. So let’s add a simple badge style to our span element. We’ll choose badge badge-info to style the span.

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span className="badge badge-info m-1">{this.styleCount()}</span>
        <button>Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

We also added a touch of margin using m-1 to give a nice effect.
react className example

While we’re at it, let’s use that className attribute once again on the button element and make it look much nicer. Let’s try btn btn-primary to see how it looks.

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span className="badge badge-info m-1">{this.styleCount()}</span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

Classes vs Styles

Now we know how to apply classes to an element in JSX using the className attribute. This is a good approach for performance and ease of use. The other option is to use the style attribute in JSX which accepts a plain JavaScript object as a value. This means you don’t use CSS syntax, but the camel-cased JavaScript version of the CSS syntax. This can be done inline, or with a distinct object. Let’s see the two approaches.

Inline Styles

Notice that for the style attribute there are double curly braces {{ }}. This is not special syntax. The outer curly braces tell JSX that what’s coming is dynamic content. If it were static, double quotes ” “ could be used. The inner curly braces are the syntax for a JavaScript object. That object has key-value pairs to denote the styles to use.

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span
          style={{ border: "7px solid lightgray" }}
          className="badge badge-info m-1"
        >
          {this.styleCount()}
        </span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

react inline style example

Styles Using a JavaScript Object

Just like we created a state object in the component, we can also create a styles property to fill up with JavaScript styles. This is a good approach when you might have several key-value pairs. The inline approach will get messy and hard to reason about. Here is an example with a few more styles added.

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  styles = {
    border: "7px solid lightgray",
    fontSize: 15,
    fontStyle: "italic"
  };

  render() {
    return (
      <React.Fragment>
        <span style={this.styles} className="badge badge-info m-1">
          {this.styleCount()}
        </span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

react style object example

Applying Classes Dynamically In React

As the state changes, you often want to change the visual style on the page for a given element. This way you can use simple logic to choose whether to apply one class or another. So what we’ll do here is to look at the value in the count variable. If count has a value of 0, then we’ll apply a yellow badge, otherwise, we’ll apply an informational color to the badge. Here is how to do that.

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 10
  };

  render() {
    let classes = "badge m-3 badge-";
    classes += this.state.count === 0 ? "warning" : "info";

    return (
      <React.Fragment>
        <span className={classes}>{this.styleCount()}</span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

With the count at 10, we get that informational badge color.
react render classes dynamically

Set that count to 0, and we see the other style. Cool!

  state = {
    count: 0
  };

react render classes dynamically example

Extracting Logic To A Method

The code above works, but let’s clean it up. We want to remove the logic from the render() method for styling, and put it in its own method in the Item class. In visual studio code, we can do this automatically by highlighting the lines we want to refactor, right-click, and then choose ‘Refactor…’.
visual studio code refactor

During the refactoring process, you can choose a name for the new method. Here is what we got once completing this step.

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span className={this.styleBadge()}>{this.styleCount()}</span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleBadge() {
    let classes = "badge m-3 badge-";
    classes += this.state.count === 0 ? "warning" : "info";
    return classes;
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

This keeps the render() method clean and makes the code easier to read.

Simple Styling Techniques For React Elements Summary

In this tutorial, we had a look at how to style some simple React elements using a couple of different techniques. The easiest way is to simply include a great CSS framework like Bootstrap or Foundation and use those classes in combination with the className attribute. Another option is to make use of the style attribute in combination with JavaScript objects containing key-value pairs of specific styles.

Click to share! ⬇️