CSS Styling

className in plaats van class

In React gebruik je className in plaats van class.

In gewone HTML gebruik je class, maar in React is dat een reserved keyword in JavaScript. Daarom gebruik je className.

Fout vs Goed:

<div class="container">
  <h1>Mijn titel</h1>
</div>
// class werkt niet in React!

<div className="container">
  <h1>Mijn titel</h1>
</div>
// className gebruiken

Methode 1: CSS Bestand

De meest gebruikte manier: maak een CSS bestand en importeer het in je component.

Stap 1: CSS bestand maken

Maak een bestand App.css in je src folder:

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

.title {
  color: blue;
  font-size: 2rem;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

Stap 2: CSS importeren in component

// src/App.jsx
import './App.css'; // CSS bestand importeren

const App = () => {
  return (
    <div className="app">
      <h1 className="title">Mijn React App</h1>
      <button className="btn btn-primary">Klik mij</button>
    </div>
  );
};

export default App;

Methode 2: Inline Styling

Je kunt ook styles direct in je component schrijven met een JavaScript object. Dit is handig voor kleine aanpassingen of dynamische styles.

Basis voorbeeld:

const MyComponent = () => {
  const titleStyle = {
    color: 'red',
    fontSize: '24px',
    textAlign: 'center'
  };

  return (
    <div>
      <h1 style={titleStyle}>Inline gestylde titel</h1>
      <p style={{ color: 'blue', margin: '10px' }}>
        Paragraph met inline styling
      </p>
    </div>
  );
};

Belangrijke regels voor inline styling:

• Gebruik camelCase voor CSS properties: fontSize in plaats van font-size
• Waarden zijn strings: '24px' in plaats van 24px
• Dubbele accolades: style={{ color: 'red' }}

Dynamische Styling

Je kunt styles dynamisch aanpassen op basis van state of props:

import { useState } from 'react';

const ColorButton = () => {
  const [isActive, setIsActive] = useState(false);

  // Style verandert op basis van state
  const buttonStyle = {
    backgroundColor: isActive ? 'green' : 'gray',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer'
  };

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

Dynamische className

const Button = ({ isPrimary }) => {
  return (
    <button className={isPrimary ? 'btn-primary' : 'btn-secondary'}>
      Click me
    </button>
  );
};

Overzicht Styling Methodes

1. CSS Bestand (Meest gebruikt)

• Voordeel: Eenvoudig, zoals gewend
• Voordeel: Herbruikbare classes
• Nadeel: Alles is globaal (tenzij je CSS modules gebruikt)

2. Inline Styling

• Voordeel: Direct in component
• Voordeel: Makkelijk dynamisch te maken
• Nadeel: Niet herbruikbaar
• Nadeel: Geen hover/focus states

Veelgemaakte Fouten

<div class="container">Content</div>
// Error!

<div className="container">Content</div>
// Werkt!

<div style={{ 'font-size': '20px' }}>Text</div>
// Error!

<div style={{ fontSize: '20px' }}>Text</div>
// Werkt!

// Component.jsx
const Component = () => {
  return <div className="my-class">Content</div>;
};
// CSS werkt niet!

// Component.jsx
import './Component.css'; // CSS importeren!

const Component = () => {
  return <div className="my-class">Content</div>;
};