Styling in React

Styling Approaches in React

When building user interfaces with React, styling is an integral part of the development process. There are several approaches to styling React components, each with its own advantages and use cases.

Choosing the right styling approach can greatly affect your application's maintainability, performance, and developer experience.

CSS Modules

CSS Modules are a popular approach that allows you to write CSS that is scoped to a specific component. This helps avoid class name collisions and makes styles more maintainable.

Example:

/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

.button:hover {
  background-color: #2563eb;
}

/* Button.jsx */
import styles from './Button.module.css';

function Button({ text, onClick }) {
  return (
    <button 
      className={styles.button}
      onClick={onClick}
    >
      {text}
    </button>
  );
}

Styled Components

Styled Components is a CSS-in-JS library that allows you to write actual CSS code within your JavaScript. It provides a powerful way to create dynamic styles based on props and theme.

Example:

import styled from 'styled-components';

const Button = styled.button`
  padding: 0.5rem 1rem;
  background-color: ${props => props.primary ? '#3b82f6' : '#e5e7eb'};
  color: ${props => props.primary ? 'white' : '#1f2937'};
  border-radius: 0.375rem;
  transition: all 0.2s;

  &:hover {
    background-color: ${props => props.primary ? '#2563eb' : '#d1d5db'};
  }
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup. It's highly customizable and promotes rapid development.

Example:

function Card({ title, description }) {
  return (
    <div className="max-w-sm rounded-lg shadow-md overflow-hidden">
      <div className="px-6 py-4">
        <h2 className="font-bold text-xl mb-2 text-gray-800">
          {title}
        </h2>
        <p className="text-gray-600">
          {description}
        </p>
      </div>
      <div className="px-6 py-4 bg-gray-50">
        <button className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition-colors duration-200">
          Learn More
        </button>
      </div>
    </div>
  );
}

Styling Best Practices