Mediefiler i React

gistfile1.md

Component Styling med CSS & SASS/SCSS

Denne guide vil forklare, hvordan du integrerer dine komponenter med prekompileret CSS (SCSS/SASS).

Det er ganske nemt at bruge sass/scss i REACT, eftersom at man kan installere et npm modul og dermed vil REACT automatisk compile vores css hver gang vi gemmer.

NB! Husk at slå Watch Sass funktionen fra på REACT projekter i VS Code. Den er ganske enkel overflødig og kan give en masse bøvl i forhold til at fjerne css filer, der ikke har et formål.

---

Installation af SASS/SCSS

For at bruge SCSS/SASS i React skal vi installere en sass compiler med følgende kommando:

% npm i -D sass

-D betyder at pakken kun skal installeres til deployment (udvikling). Det giver god mening da vi kun compiler vores scss filer i udviklingsfasen.

---

SCSS som import

Nu kan vi ganske enkelt importere vores stylesheets (enten med .css filer eller .scss) i den komponent, hvor vi skal bruge det:

import './App.scss';

const App = () => {
	return (
		<div className="someClass">
		</div>
	)
}

---

Filstruktur

I REACT er det en almindelig best-practice at placere komponent og stylesheet filer i den samme mappe.

Eksempel på filstruktur med SCSS filer:

-- components
	-- Partials
		-- Header
			- Header.js
			- Header.scss
		-- Main
			- Main.js
			- Main.scss

På den måde kan vi holde vores komponenter isolerede og uafhængige af anden kode i vores projekt og det gør dem nemmere at flytte rundt med.

---

CSS/SCSS Modules

CSS Modules er en anden og ganske praktisk metode som gør det muligt at bruge local scoped CSS til dine komponenter.

En CSS module fil placeres i samme mappe som komponentet og indeholder kun styling til det enkelte komponent.

Alle klassenavne i en CSS module fil bliver compilet med et unikt navn og dermed vil de ikke kollidere med klassenavne i et andet komponent.

Det gør at vi ikke skal tænke, og huske på, hvilke CSS klasse navne der ellers bliver brugt i vores app.

For at lave vores CSS/SCSS til CSS moduler skal vi navngive dem efter følgende syntaks:

component-navn.module.scss

Hvor vi selvfølgelig skal skifte component-navn ud med navnet på vores komponent.

Eksempel:

Header.module.scss

Så snart vi lader filnavne slutte med .module.scss vil REACT registrere dem som CSS modules.

Vi skal forsat skrive vores scss kode sådan som vi altid har gjort.

Men det betyder at vi kan importere vores stylesheet på samme måde som et javascript objekt:

import styles from './Header.module.scss'

Ved at bruge CSS modules, konverterer REACT vores scss til et javascript objekt, hvor alle vores klasser nu ligger som key values.

Eksempel:

import styles from './Header.module.scss'

const Header = () => {
	return (
		<div className={styles.headerwrapper}>
			Indhold...
		</div>
	)
}

Det giver både fordele og ulemper.

En af fordelene er, at alle vores klassenavne får et unikt navn når REACT compiler vores app. (Som i hver gang vi gemmer)

Ulempen er, at vi er lidt afhængige af at tildele klasser til vores html elementer og skal tænke lidt anderledes hvis vi eksempelvis vil lave en selector til alle p eller div tags.

---

Inline Styling

Det er selvfølgelig også muligt at lave inline style i REACT. Dette fungerer ved at give komponenterne en style attribut med et js objekt som indeholder de traditionelle JavaScript style properties (Eks. domElement.style.textAlign = "center"). REACT vil derefter sørge for at compile dette objekt til almindelig inline css, når vi gemmer vores dokument.

Eksempel 1: Inline style attribut

const Footer = () => {
	return (
		<footer style={
			{ 
				border: "solid 1px red",
				border-radius: "3px" 
			}
		}>
		</footer>
	)
}

Eksempel 2: Inline style object

const Main = () => {
	const wrapper = {
		color: 'black',
		display: 'inline-block'
	}

	return (
		<div className={wrapper}></div>
	)
}

Det er lidt bad practice at lave inline styling men i nogle tilfælde kan det være nødvendigt.

---