Styling in React: CSS-in-JS and Other Approaches

Introduction

Styling in React has evolved significantly, offering various approaches to manage and apply styles to components. In this article, we’ll explore different styling methodologies, with a focus on the CSS-in-JS approach. We’ll cover the basics, advantages, and provide examples for a comprehensive understanding of styling in React.

Traditional Stylesheets

Basic CSS Styles

The most common and traditional approach is using external stylesheets. You create a separate CSS file and import it into your React components.

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

const App = () => {
  return (
    <div className="app-container">
      <h1>Hello, React!</h1>
    </div>
  );
};

export default App;

/* styles.css */
.app-container {
  text-align: center;
  padding: 20px;
}

h1 {
  color: #007bff;
}

Inline Styles

Styling Directly in Components

React allows you to define styles directly in the components using inline styles.

// App.js
import React from 'react';

const App = () => {
  const containerStyle = {
    textAlign: 'center',
    padding: '20px',
  };

  const headingStyle = {
    color: '#007bff',
  };

  return (
    <div style={containerStyle}>
      <h1 style={headingStyle}>Hello, React!</h1>
    </div>
  );
};

export default App;

CSS Modules

Local Scoping with CSS Modules

CSS Modules provide local scoping for styles, avoiding global conflicts.

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

const App = () => {
  return (
    <div className={styles.appContainer}>
      <h1 className={styles.heading}>Hello, React!</h1>
    </div>
  );
};

export default App;

/* App.module.css */
.appContainer {
  text-align: center;
  padding: 20px;
}

.heading {
  color: #007bff;
}

CSS-in-JS Libraries

Emotion – A CSS-in-JS Library

CSS-in-JS libraries like Emotion enable writing styles directly in your JavaScript code. Emotion provides a powerful and expressive way to manage styles in React.

npm install @emotion/react @emotion/styled

// App.js
import React from 'react';
import { css } from '@emotion/react';

const containerStyle = css`
  text-align: center;
  padding: 20px;
`;

const headingStyle = css`
  color: #007bff;
`;

const App = () => {
  return (
    <div css={containerStyle}>
      <h1 css={headingStyle}>Hello, React!</h1>
    </div>
  );
};

export default App;

Styled Components

Styled Components Library

Styled Components is another popular CSS-in-JS library that allows you to write CSS directly within your JavaScript files.

npm install styled-components

// App.js
import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  text-align: center;
  padding: 20px;
`;

const Heading = styled.h1`
  color: #007bff;
`;

const App = () => {
  return (
    <Container>
      <Heading>Hello, React!</Heading>
    </Container>
  );
};

export default App;

Conclusion

Styling in React provides flexibility, and the choice of styling methodology often depends on project requirements and personal preferences. Traditional stylesheets, inline styles, CSS Modules, CSS-in-JS libraries like Emotion and Styled Components are all viable options. Experiment with different approaches and choose the one that best fits your project’s needs, scalability, and maintainability. As you continue to work with React, exploring various styling methods will contribute to your understanding of building aesthetically pleasing and well-organized user interfaces.

Post Views: 106