Styling React pomocí CSS
Existuje mnoho způsobů, jak stylovat React pomocí CSS, tento tutoriál se blíže podívá na tři běžné způsoby:
- Inline styling
- CSS styly
- Moduly CSS
Inline styling
Chcete-li upravit prvek pomocí atributu inline style, hodnota musí být objekt JavaScriptu:
Příklad:
Vložte objekt s informacemi o stylu:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Poznámka: V JSX se výrazy JavaScriptu zapisují do složených závorek, a protože objekty JavaScriptu také používají složené závorky, je styl ve výše uvedeném příkladu zapsán do dvou sad složených závorek {{}}.
názvy vlastností camelCased
Vzhledem k tomu, že inline CSS je zapsáno v objektu JavaScriptu, vlastnosti s oddělovači pomlček, jako background-colorje , musí být zapsány pomocí syntaxe velkých písmen:
Příklad:
Použijte backgroundColormísto
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Objekt JavaScript
Můžete také vytvořit objekt s informacemi o stylu a odkazovat na něj v atributu style:
Příklad:
Vytvořte objekt stylu s názvem myStyle:
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
CSS styly
Svůj styl CSS můžete napsat do samostatného souboru, stačí uložit soubor s
.csspříponou souboru a importovat jej do aplikace.
App.css:
Vytvořte nový soubor s názvem „App.css“ a vložte do něj nějaký kód CSS:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Poznámka: Soubor můžete nazvat jakkoli chcete, stačí si zapamatovat správnou příponu souboru.
Importujte šablonu stylů do vaší aplikace:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
Moduly CSS
Dalším způsobem přidávání stylů do vaší aplikace je použití modulů CSS.
Moduly CSS jsou vhodné pro komponenty, které jsou umístěny v samostatných souborech.
CSS uvnitř modulu je k dispozici pouze pro komponentu, která jej importovala, a nemusíte se obávat konfliktů názvů.
Vytvořte modul CSS s .module.css
příponou, příklad: my-style.module.css.
Vytvořte nový soubor s názvem „my-style.module.css“ a vložte do něj nějaký CSS kód:
my-style.module.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Importujte šablonu stylů do vaší komponenty:
Car.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Importujte komponentu do vaší aplikace:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));