3 Ways to style in react.

Every application has two objectives, First to work as intended as per the business logic of the application. The second is to look good, Now good is subjective for some it's clean & minimal for some it's flashy. What's right is for your application is for you or your team to decide.

Now in this post, we tend to focus more on the second part that is the styling part, It's more like makeup to enhance the existing structure of our application.

There are 3 ways to style or react application

1. INLINE CSS

Inline CSS is the easiest way to get started with styling in react. Just include the style required inside the style attribute of an HTML element as shown below.

> function Cart({ items, onClick }) {
  return (
          <button
            type="button"
            onClick={() => onClick(item)}
            style={{
              cursor: 'pointer',
              border: '1px solid #1a202c',
              padding: '8px',
              minWidth: '64px',

              background: 'transparent',

              transition: 'all 0.1s ease-in',
            }}
          >
          </button>
  );
}

The Cons of this approach are the JSX becomes easily unreadable, also the styles are pretty much tied down and fixed, changing the stylings depending upon user interactions would also become quite difficult.

2. EXTERNAL CSS

In this approach, all of the CSS/styles are stored in a separate file, and className are added to the HTML elements to target an element with a particular style

Style.css

.button__cart {
  cursor: pointer;
  border: 1px solid #1a202c;
  padding: 8px;
  min-width: 64px;

  background: transparent;

  transition: all 0.1s ease-in;
}

.button__cart:hover {
  background: #1a202c;
  color: #ffffff;
}

React Component File

import React from 'react';
import './style.css';

function Product() {
  return (
          <button
            type="button"
            className="button__cart"
            onClick={() => onClick(item)}
          >
          </button>
  );
}

It keeps the JSX cleaner and the css is also easy to maintain, plus toggling style is easier just toggle the className variable depending upon the user interaction. The cons of the approach are the components are not truly standalone, they would always need the external css file to be imported for the styles to be applied correctly.

3. STYLED COMPONENTS

Styled Components brings the best of both worlds and help us truly generate reusable react components without depending on external css file or inline css.

Install Styled Components

npm install styled-components

React Component With Styled Component

import React from 'react';
import styled from 'styled-components';


function Cart() {
  return (
          <Button__checkout type="button" onClick={() => onClick(item)}>
            {item.isFavorite ? 'Unlike' : 'Like'}
          </Button__checkout>
            )
}

const button__checkout = styled.button`
  cursor: pointer;
  border: 1px solid #1a202c;
  padding: 8px;
  min-width: 64px;

  background: transparent;

  transition: all 0.1s ease-in;

  &:hover {
    background: #1a202c;
    color: #ffffff;
  }
`;

These Styled Components not only help us to create a reusable component but also helps us keep all the required code for a component in the same file.

And that's it!

I hope this tutorial has been helpful for you to get started with styling in react.

What's your favorite way of styling in react? Please let me know in the comments.

Thanks for reading and have fun learning! Cheers!

Ashish Bhogesara