Styling van React-componenten met Emotion

Wil je de styling van React-componenten op een moderne en krachtige manier aanpakken? Met de bibliotheek Emotion kun je CSS rechtstreeks integreren in je React-componenten en zo effectief je gebruikersinterface vormgeven. In deze handleiding leg ik je de basisprincipes uit van styling met Emotion, hoe je de bibliotheek installeert en toepast en geef ik je wat handige tips.

Belangrijkste inzichten

• Emotion maakt het mogelijk om CSS in JavaScript te schrijven en biedt een intuïtieve hantering.
• Met Emotion kun je verschillende stylingtechnieken gebruiken, waaronder Template Literals en het gebruik van de css-Props.
• Stijlbeheer wordt door het gebruik van Emotion modulair, wat de herbruikbaarheid en leesbaarheid verbetert.

Stap-voor-stap handleiding

1. Emotion installeren

Je moet Emotion eerst installeren in je project. Open de terminal en navigeer naar de map van je project. Voer hier de volgende opdracht uit om de Emotion-bibliotheek te installeren:

npm install @emotion/react @emotion/styled

2. CSS importeren

In je App.jsx-bestand kun je Emotion gebruiken. Je moet Emotion importeren om de css-functie te gebruiken, evenals het styled-element. Voeg het volgende toe aan het begin van je bestand:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

3. Styling met Template Literals

Gebruik de css-functie van Emotion om een CSS-variabele te maken. Definieer de CSS-conventies met behulp van Template Literals. Hier is een voorbeeld van hoe je een wrapperklasse voor je app kunt schrijven:

const appStyle = css` display: flex; flex-direction: column; font-size: 16px;
`;

Deze code maakt gebruik van flexbox om een lay-out opzet te verzekeren.

4. Toepassing van de stijl

Om de gedefinieerde stijl toe te passen, geef de appStyle-variabele door in de className-Prop van je hoofd-HTML-element. Zo zou dat eruit moeten zien:

function App() { return <div css={appStyle}>Hallo wereld!</div>;
}

5. Gebruik van Styled-Components

Niet alleen kun je de css-variabele gebruiken, je kunt ook Styled-Components met Emotion gebruiken. Om een Styled-component te maken, kun je de volgende code gebruiken:

const Container = styled.div` padding: 20px; background-color: lightblue;
`;

Hiermee wordt Container een nieuwe op CSS gebaseerde component met alle gedefinieerde stijlen.

6. Media queries invoegen

Emotion maakt het gemakkelijk om media queries in je CSS te integreren. Voeg ze eenvoudig toe aan de Template Literal:

const responsiveStyle = css` @media (max-width: 600px) { font-size: 14px; }
`;

Deze media query wijzigt de lettergrootte van de tekst wanneer het scherm smaller is dan 600 pixels.

7. Hover-effecten toepassen

Je kunt ook heel gemakkelijk hover-effecten definiëren in je CSS-templates:

const buttonStyle = css` background-color: blue; color: white; &:hover { background-color: darkblue; }
`;

Deze CSS-regel verandert de achtergrondkleur van het element wanneer er met de muis overheen wordt bewogen.

8. Combineren van complexere stijlen

Emotion staat het combineren van meerdere klassenamen toe. Dit wordt mogelijk gemaakt met de cx-functie:

import { css, cx } from '@emotion/react';

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

In dit geval wordt de tekst zowel blauw als rood weergegeven.

9. Toekomstige uitbreidingen

Als je in de toekomst een groot project beheert, kan het handig zijn om je stijlen in verschillende modules te organiseren. Je kunt bijvoorbeeld commonStyles.js maken en daar je basisstijlen exporteren:

// commonStyles.js
export const flexCenter = css` display: flex; justify-content: center; align-items: center;
`;

Je kunt nu flexCenter invoegen in elk ander component.

10. Tests en aanpassingen

Laad je applicatie in de browser en controleer of de stijlen correct worden weergegeven. Experimenteer met verschillende stijlen en bekijk het resultaat in realtime.

Samenvatting

Met een combinatie van Emotion en React is het mogelijk om realistische UI-layouts te maken. Emotion maakt het mogelijk om CSS rechtstreeks in JavaScript te definiëren en effectief te beheren. Hierbij kun je profiteren van de voordelen van Screen Density en een nauwe integratie tussen logica en styling.