Stylizacja Reaguj za pomocą CSS
Istnieje wiele sposobów stylizowania Reacta za pomocą CSS, w tym samouczku przyjrzymy się bliżej trzem typowym sposobom:
- Stylizacja w linii
- Arkusze stylów CSS
- Moduły CSS
Stylizacja w linii
Aby nadać styl elementowi za pomocą atrybutu inline style, wartość musi być obiektem JavaScript:
Przykład:
Wstaw obiekt z informacjami o stylizacji:
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Uwaga: W JSX wyrażenia JavaScript są zapisywane w nawiasach klamrowych, a ponieważ obiekty JavaScript również używają nawiasów klamrowych, styl w powyższym przykładzie jest napisany w dwóch zestawach nawiasów klamrowych {{}}.
camelCased Nazwy nieruchomości
Ponieważ wbudowany CSS jest napisany w obiekcie JavaScript, właściwości z separatorami myślników, takie jak background-color, muszą być napisane ze składnią wielkości liter wielbłąda:
Przykład:
Użyj backgroundColorzamiast
background-color:
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
Obiekt JavaScript
Możesz również utworzyć obiekt z informacjami o stylu i odnieść się do niego w atrybucie style:
Przykład:
Utwórz obiekt stylu o nazwie 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>
</>
);
}
Zostać certyfikowanym!
95 $ ZAPISZ
Arkusz stylów CSS
Możesz napisać styl CSS w osobnym pliku, po prostu zapisz plik z
.cssrozszerzeniem pliku i zaimportuj go do swojej aplikacji.
App.css:
Utwórz nowy plik o nazwie „App.css” i wstaw do niego kod CSS:
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Uwaga: możesz nazwać plik, jak chcesz, pamiętaj tylko o poprawnym rozszerzeniu pliku.
Zaimportuj arkusz stylów do swojej aplikacji:
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'));
Moduły CSS
Innym sposobem dodawania stylów do aplikacji jest użycie modułów CSS.
Moduły CSS są wygodne dla komponentów umieszczonych w osobnych plikach.
CSS wewnątrz modułu jest dostępny tylko dla komponentu, który go zaimportował, i nie musisz się martwić o konflikty nazw.
Utwórz moduł CSS z .module.css
rozszerzeniem, na przykład: my-style.module.css.
Utwórz nowy plik o nazwie „my-style.module.css” i wstaw do niego kod CSS:
mój-styl.moduł.css:
.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}
Zaimportuj arkusz stylów do swojego komponentu:
Car.js:
import styles from './my-style.module.css';
const Car = () => {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
export default Car;
Zaimportuj komponent do swojej aplikacji:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));