React CSS Styling

Styling Methods in React

React provides flexibility in how you apply styles to components. You can use traditional CSS files, inline styles with JavaScript objects, or modern CSS-in-JS solutions. Understanding each approach helps you choose the best method for your project needs.

🔹 Inline Styles

Apply styles directly using JavaScript objects. Note that property names use camelCase:

function InlineStyleExample() {
  const headingStyle = {
    color: 'blue',
    fontSize: '24px',
    textAlign: 'center',
    marginBottom: '10px'
  };

  const boxStyle = {
    backgroundColor: '#f0f0f0',
    padding: '20px',
    borderRadius: '8px',
    border: '2px solid #ddd'
  };

  return (
    <div style={boxStyle}>
      <h2 style={headingStyle}>Inline Styled Heading</h2>
      <p style={{ color: 'gray', lineHeight: '1.6' }}>
        This paragraph uses inline styles.
      </p>
    </div>
  );
}

🔹 External CSS Files

Import CSS files and use className to apply styles:

🔸 CSS File (styles.css)

.card {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card-title {
  color: #333;
  font-size: 20px;
  margin-bottom: 10px;
}

.card-text {
  color: #666;
  line-height: 1.5;
}

🔸 React Component

import './styles.css';

function Card() {
  return (
    <div className="card">
      <h3 className="card-title">Card Title</h3>
      <p className="card-text">
        This card is styled with external CSS.
      </p>
    </div>
  );
}

🔹 Dynamic Styles

Change styles based on state or props:

import { useState } from 'react';

function DynamicButton() {
  const [isActive, setIsActive] = useState(false);

  const buttonStyle = {
    padding: '10px 20px',
    fontSize: '16px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    backgroundColor: isActive ? '#4CAF50' : '#f44336',
    color: 'white',
    transition: 'all 0.3s'
  };

  return (
    <button
      style={buttonStyle}
      onClick={() => setIsActive(!isActive)}
    >
      {isActive ? 'Active' : 'Inactive'}
    </button>
  );
}

🔹 Conditional Classes

Apply different classes based on conditions:

function Alert({ type, message }) {
  const baseClass = 'alert';
  const typeClass = type === 'success' ? 'alert-success' : 'alert-error';
  
  return (
    <div className={`${baseClass} ${typeClass}`}>
      {message}
    </div>
  );
}

// Usage
<Alert type="success" message="Operation successful!" />
<Alert type="error" message="Something went wrong!" />

🔹 Combining Multiple Styles

Merge multiple style objects together:

function StyledComponent() {
  const baseStyle = {
    padding: '15px',
    borderRadius: '5px'
  };

  const colorStyle = {
    backgroundColor: '#e3f2fd',
    color: '#1976d2'
  };

  const combinedStyle = { ...baseStyle, ...colorStyle };

  return (
    <div style={combinedStyle}>
      Combined styles from multiple objects
    </div>
  );
}