Wszyscy znamy standardowy sposób łączenie arkusza stylów do <head> dokumentu HTML, prawda? To tylko jeden z kilku sposobów pisania CSS. Ale jak wygląda stylizowanie rzeczy w aplikacji jednostronicowej (SPA), powiedzmy w projekcie React?
Okazuje się, że istnieje kilka sposobów na stylizację aplikacji React. Niektóre pokrywają się z tradycyjną stylizacją, inne nie. Ale policzmy wszystkie sposoby, w jakie możemy to zrobić.
Importowanie zewnętrznych arkuszy stylów
Jak sama nazwa wskazuje, React potrafi importować pliki CSS. Proces jest podobny do tego, jak łączymy plik CSS w HTML <head>:
- Utwórz nowy plik CSS w katalogu projektu.
- Napisz CSS.
- Zaimportuj go do pliku React.
Jak to:
import "./style.css";Zwykle znajduje się na górze pliku, gdzie mają miejsce inne importy:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;W tym przykładzie plik CSS jest importowany do App.js z /Components/css teczka.
Napisz style wbudowane
Możesz być przyzwyczajony do słyszenia, że stylizacja inline nie jest zbyt dobra, jeśli chodzi o konserwację i tak dalej, ale zdecydowanie są sytuacje (Tutaj jest jeden!), gdzie ma to sens. A konserwacja jest mniejszym problemem w React, ponieważ CSS często i tak znajduje się już w tym samym pliku.
Oto bardzo prosty przykład stylizacji inline w React:
<div className="main" style={{color:"red"}}>Lepszym podejściem jest jednak użycie obiektów:
- Najpierw utwórz obiekt, który zawiera style dla różnych elementów.
- Następnie dodaj go do elementu za pomocą
styleatrybut, a następnie wybierz właściwość do stylizacji.
Zobaczmy to w kontekście:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Ten przykład zawiera styles obiekt zawierający jeszcze dwa obiekty, jeden dla .main class i drugi dla danych wejściowych tekstowych, które zawierają reguły stylów podobne do tych, których spodziewalibyśmy się zobaczyć w zewnętrznym arkuszu stylów. Obiekty te są następnie stosowane do style atrybut elementów, które znajdują się w zwróconym znaczniku.
Zwróć uwagę, że podczas odwoływania się do stylów używane są nawiasy klamrowe, a nie znaki cudzysłowu, których normalnie używamy w zwykłym HTML.
Użyj modułów CSS
Moduły CSS… co do cholery się z nimi stało, prawda? Mają zaletę zmiennych o zasięgu lokalnym i mogą być używane razem z Reactem. Ale czym one są, znowu, dokładnie?
Cytując dokumentacja repo:
Moduły CSS działają poprzez kompilację pojedynczych plików CSS zarówno w CSS, jak i dane. Wyjście CSS to normalny, globalny CSS, który można wstrzyknąć bezpośrednio do przeglądarki lub połączyć i zapisać w pliku do użytku produkcyjnego. Dane są używane do mapowania nazw czytelnych dla człowieka użytych w plikach na globalnie bezpieczny wyjściowy kod CSS.
Mówiąc prościej, moduły CSS pozwalają nam używać tej samej nazwy klasy w wielu plikach bez kolizji, ponieważ każda nazwa klasy ma unikalną nazwę programową. Jest to szczególnie przydatne w większych aplikacjach. Każda nazwa klasy jest ograniczona lokalnie do określonego składnika, w którym jest importowana.
Arkusz stylów modułu CSS jest podobny do zwykłego arkusza stylów, tylko z innym rozszerzeniem (np styles.module.css). Oto jak są skonfigurowane:
- Utwórz plik za pomocą
.module.cssjako rozszerzenie. - Zaimportuj ten moduł do aplikacji React (tak jak widzieliśmy wcześniej)
- dodaj
classNamedo elementu lub komponentu i odwołuje się do określonego stylu z importowanych stylów.
Super prosty przykład:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Użyj stylizowanych komponentów
Użyłeś stylizowane komponenty? Jest dość popularny i pozwala na budowanie niestandardowych komponentów przy użyciu rzeczywistego CSS w Twoim JavaScript. Styled-component to w zasadzie komponent React ze stylami — przygotuj się na to. Niektóre z funkcji obejmują unikalne nazwy klas, dynamiczną stylizację i lepsze zarządzanie CSS, ponieważ każdy komponent ma swoje własne oddzielne style.
Zainstaluj pakiet styled-components npm w wierszu poleceń:
npm install styled-componentsNastępnie zaimportuj go do aplikacji React:
import styled from 'styled-components'Utwórz komponent i przypisz do niego właściwość ze stylem. Zwróć uwagę na użycie literałów szablonu oznaczonych backtickami w Wrapper obiekt:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Powyżej Wrapper komponent zostanie wyrenderowany jako div zawierający te style.
Stylizacja warunkowa
Jedną z zalet styled-components jest to, że same komponenty są funkcjonalne, ponieważ możesz używać rekwizytów w CSS. Otwiera to drzwi do instrukcji warunkowych i zmiany stylów na podstawie stanu lub właściwości.
Oto demo, które to pokazuje:
Tutaj manipulujemy divami display właściwość w stanie wyświetlania. Ten stan jest kontrolowany przez przycisk, który po kliknięciu przełącza stan div. To z kolei przełącza między stylami dwóch różnych stanów.
W linii if oświadczenia, używamy a ? zamiast zwykłego if/else składnia. The else część jest po średniku. I pamiętaj, aby zawsze wywoływać lub używać stanu po jego zainicjowaniu. Na przykład w tym ostatnim demo stan powinien znajdować się powyżej Wrapper style komponentu.
Wesołej stylizacji React!
To jest okład, ludzie! Przyjrzeliśmy się kilku różnym sposobom pisania stylów w aplikacji React. I nie jest tak, że jeden jest lepszy od pozostałych; podejście, które stosujesz, zależy oczywiście od sytuacji. Mam nadzieję, że teraz dobrze je rozumiesz i wiesz, że masz kilka narzędzi w swoim arsenale stylizacji React.
