MODULE 7

Styling in React

Master different approaches to styling React components

CSS in React

There are several ways to style React components. Each has pros and cons.

Inline Styles

Pass a JavaScript object as the style prop:

Basic Inline Styles

function Button() {
  const buttonStyle = {
    backgroundColor: '#667eea',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    fontSize: '16px'
  };
  
  return (
    
  );
}

Dynamic Styles

function Button({ isPrimary }) {
  const buttonStyle = {
    backgroundColor: isPrimary ? '#667eea' : '#ccc',
    color: isPrimary ? 'white' : 'black',
    padding: '10px 20px'
  };
  
  return (
    
  );
}

Pros: Dynamic, scoped to component

Cons: No hover/media queries, verbose, no reuse

External CSS Files

Import CSS files and use className:

Button.css

.button {
  background-color: #667eea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: 'pointer';
}

.button:hover {
  background-color: #764ba2;
}

Button.js

import './Button.css';

function Button() {
  return (
    
  );
}

Pros: Standard CSS, hover/media queries work

Cons: Global namespace, potential conflicts

CSS Modules

Scoped CSS that's imported as an object:

Button.module.css

.button {
  background-color: #667eea;
  color: white;
  padding: 10px 20px;
}

.primary {
  background-color: #667eea;
}

.secondary {
  background-color: #ccc;
}

Button.js

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

function Button({ variant = 'primary' }) {
  return (
    
  );
}

Pros: Scoped, hover/media queries, no conflicts

Cons: Setup required, less dynamic

Styled Components (Concept)

Write CSS in JavaScript using template literals. (Requires a library)

Example (styled-components library)

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #667eea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  &:hover {
    background-color: #764ba2;
  }
`;

function Button() {
  return (
    
      Click me
    
  );
}

Pros: Dynamic CSS, scoped, full CSS features

Cons: Requires library, larger bundle

Tailwind CSS

Utility-first CSS framework. Very popular with React.

Using Tailwind

function Button() {
  return (
    
  );
}

Dynamic Classes

function Button({ isPrimary }) {
  const baseClasses = "px-4 py-2 rounded font-semibold";
  const conditionalClasses = isPrimary
    ? "bg-blue-600 text-white hover:bg-blue-700"
    : "bg-gray-300 text-gray-800 hover:bg-gray-400";
  
  return (
    
  );
}

💡 Tip: Use the clsx or classnames library to manage conditional classes more cleanly.

Bootstrap with React

Bootstrap can be used with React for quick styling:

Using Bootstrap

// In index.html head


// In component
function Card() {
  return (
    
      
        Card Title
        Card content here
      
    
  );
}

Best Practices

1. Choose One Approach (or Few)

Mixing CSS approaches can get messy. Pick one or two that work for your project.

2. Keep Styles Close to Components

Store styles near the components that use them.

3. Use CSS Variables for Theming

// styles.css
:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --spacing-unit: 8px;
}

// Button.css
.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 1.25);
}

4. Avoid Deep Nesting

Keep CSS specificity low for easier overrides.

5. Use Semantic Class Names

// ❌ Bad


// ✅ Good

Responsive Design in React

With CSS Modules

// Button.module.css
.button {
  padding: 10px 20px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

With Tailwind

function Responsive() {
  return (
    
      {/* Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns */}
    
  );
}

Key Takeaways

Multiple styling approaches exist in React
Inline styles: Dynamic but limited
External CSS: Standard but global
CSS Modules: Scoped CSS without library
Styled Components: CSS in JS with full features
Tailwind: Utility-first, increasingly popular
Choose one approach for consistency
Keep styles close to components
Use responsive design for mobile users