Stylování v Reactu
Stylování v Reactu je podobné jako v HTML, ale máme více možností.
Můžeme využít CSS, SCSS, Tailwind CSS, nebo něco jiného.
Inline CSS v Reactu
Situace: Chceme rychle definovat styly pro jednu komponentu. Tohle bežně dělat nebudeme, ale je dobré vědět, že to jde.Také je možné využít k podmíněnému stylování, tj. např. na základě stavu komponenty.
function MyComponent() {
return <div style={{
color: 'red',
cursor: 'pointer',
backgroundColor: 'blue',
padding: '10px',
borderRadius: '5px',
}}>Hello</div>;
}Pokud chceme, můžeme použít objekt v const a exportovat ho, čímž jej můžeme importovat a použít v jiné komponentě.
export const styles = {
color: 'red',
cursor: 'pointer',
backgroundColor: 'blue',
padding: '10px',
borderRadius: '5px'
}
const MyComponent = () => {
return <div style={styles}>Hello</div>;
}Třídy v Reactu
Situace: Máme definovány třídy v CSS, chceme je použít v Reactu.
.my-component {
color: red;
}Třídu můžeme použít v Reactu pomocí className atributu. CSS soubor importujeme na začátku komponenty.
Proč používat
classNamea ne “normální”class?
classje v JavaScriptu klíčové slovo, které se používá pro vytvoření třídy.
JSXje vlastně JavaScript, který umožňuje psát HTML v JavaScriptu, proto nelze mítclassjako atribut.
import React from 'react';
function MyComponent() {
return <div className="my-component">Hello</div>;
}Pokud jsi zvyklý používat SCSS, po doinstalaci balíčku sass můžeme použít SCSS syntaxi.
npm install sass.my-component:hover {
.inside-component {
color: red;
}
}import 'style.scss';
function MyComponent() {
return (
<div className="my-component">
Hello
<div className="inside-component">Hello</div>
</div>
);
}CSS moduly
Tuto metodu používáme v podobném případě jako třídy v CSS. Pokud ale importujeme CSS, kde budou 2 třídy s tímže názvem, tak to nebude fungovat.
CSS moduly nám pomohou vyřešit tento problém tím, že každá použitá třída bude mít při spuštění aplikace unikátní název.
/* style.css */
.my-component {
color: red;
}Chceme použít tento styl, ale ve stejném souboru máme i třídu s tímže názvem.
/* style.module.css */
.my-component {
color: red;
}import moduleStyles from 'style.module.css';
import styles from 'style.css';
function MyComponent() {
return <div className={moduleStyles.myComponent}>
Hello
<div className={styles.insideComponent}>Hello</div>
</div>;
}