ReactJS Styling: Exploring Different Techniques with Examples

In ReactJs development, how we style things is super important. This article explores different ways to style React components, each with its own benefits and best uses.

There are various methods or, more precisely, numerous ways to utilize CSS in ReactJs :

Traditional Stylesheets:
The conventional method involves using external stylesheets (CSS or SCSS) and importing them directly into React components. For instance:

// styles.css
.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

// Button.js
import React from 'react';
import './styles.css';

const Button = () => (
  <button className="button">
    Click me
  </button>
);

export default Button;

Inline Styles:
React supports inline styles, allowing developers to apply styles directly within components using JavaScript objects. For instance:

const Button = () => {
  const buttonStyles = {
    backgroundColor: '#2ecc71',
    color: '#fff',
    padding: '10px 15px',
    border: 'none',
    borderRadius: '5px',
  };

  return (
    <button style={buttonStyles}>
      Click me
    </button>
  );
};

CSS Modules:
CSS Modules offer local scoping within React components to avoid global styling conflicts. For instance:

// Button.module.css
.button {
  background-color: #e74c3c;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

// Button.js
import React from 'react';
import styles from './Button.module.css';

const Button = () => (
  <button className={styles.button}>
    Click me
  </button>
);

export default Button;

Styled Components:
Styled-components allow the definition of styles directly within JavaScript files. For instance:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #f39c12;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
`;

const Button = () => (
  <StyledButton>
    Click me
  </StyledButton>
);

Preprocessors(SASS/LESS):
Integrating CSS preprocessors enhances styling capabilities. For instance, using SASS:

// styles.scss
$primary-color: #9b59b6;

.button {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

// Button.js
import React from 'react';
import './styles.scss';

const Button = () => (
  <button className="button">
    Click me
  </button>
);

export default Button;

Utility-First CSS:
Libraries like Tailwind CSS provide a utility-first approach. For instance:

import React from 'react';

const Button = () => (
  <button className="bg-gray-800 text-white p-2 rounded">
    Click me
  </button>
);

Conclusion:
In ReactJs, choosing the right styling approach is crucial. Whether using traditional stylesheets, inline styles, CSS Modules, Styled Components, preprocessors, or a utility-first paradigm, understanding these techniques empowers developers for tailored decisions in their projects. This tutorial is brought to you by Jsconfig.com, specializing in React.js training.

Feel free to contribute any additional methods you're familiar with in the comment section.