React: Tworzenie globalnych stylów

16.8.x

0:00Cześć, skoro już wiesz jak tworzyć styled-components i w jaki sposób możemy wpływać na

0:04ich wygląd, na ich zachowanie poprzez właśnie dodawanie propsów czy to bulian'ów czy

0:08takich przechowujących wartość to teraz czas, żeby pokazać jeszcze jedną

0:12rzecz związana z API styled-components, czyli z tą biblioteką, która

0:17pozwoli nam na stworzenie globalnych stylów, które będą aplikowane do wszystkich

0:21widoków, które stworzymy w naszej aplikacji i możemy to osiągnąć poprzez dodanie

0:26funkcji createGlobalStyle i następnie na podstawie właśnie takiego

0:30stworzonego komponentu wykorzystującego te funkcje możemy osadzić go

0:35w DOM'ie, więc teraz zaimportujemy sobie to createGlobalStyle

0:39i żeby to zrobić stworzymy osobne folder w folderze src nazwiemy

0:43go theme. Plik nazwiemy GlobalStyle

0:49js, tutaj zaimportujemy tę

0:53funkcję oczywiście ze styled-components i teraz

0:59jedenyne, co musimy zrobić to stworzyć component, który

1:03może na przykład nazywać się GlobalStyle i tym

1:12miejscu możemy zacząć stylować wszystkie rzeczy, które chcemy żeby były właśnie globalne,

1:16jeśli chodzi o style, więc na pewno użyjemy universal selector, zaaplikujemy

1:22go również do before i after i powiemy, że box-sizing

1:27to musi być border-box, ta właściwość sprawia, że cały

1:31nas layout po prostu będzie zachowywał się dużo bardziej przewidywalny sposób. Dodatkowo

1:37jeszcze musimy zaimportować sobie nasz font montserrat. Możemy

1:43to zrobić poprzez wybranie tutaj font'ów Google Fonts'ach. My

1:48w naszym projekcie używamy dwóch stylów, czyli

1:52like i semibold i za importujemy

1:56je poprzez ten kod CSS, normalnie w normalnym CSS'ie

2:01nie byłoby to zalecane jednak przez to, że w style components

2:05współdziałają z webpack'iem i tak dalej, to to nie jest taki zwykły import,

2:09który po prostu będzie ładowany tam dynamicznie tylko podczas budowania

2:13projektu zostanie to z optymalizowanie, także o to się nie musimy martwić. Kopiujemy

2:18sobie ten import wklejamy go tutaj i

2:22teraz możemy w naszym body powiedzieć font-family

2:26Montserrat i damy jeszcze zapasowy

2:31sans-serif. Dodatkowo zastosujemy tutaj takie podejście,

2:35które się nazywa happy rems i być może już obiło ci się to uszy

2:39ale może być też tak, że będzie to dla ciebie totalna nowość. Pewnie

2:44kiedyś gdzieś widziałeś lub widziałeś, że mamy coś takiego kiedy

2:48wykorzystujemy rems, że chcemy powiedzieć na przykład font-size i ten

2:52font'size ma jakieś absurdalny rozmiar

2:56typu jakieś po prostu po przecinku milion rzeczy, które są totalnie

3:00nieczytelne i trzeba to sobie liczyć w głowie, nawet zwykły font-szie, jeśli

3:05chcemy żeby miał 17 pikseli, no to skoro rem

3:09wynosi 16 pikseli w przeglądarce domyślnie to teraz żeby

3:13ten font miał 17 pikseli no to musimy to po prostu sobie przemnożyć,

3:18policzyć przekonwertować, żeby zobaczyć, że na przykład jest

3:22o jeden jeden pięć rem, coś takiego. W każdym razie

3:26liczenie tego jest po prostu nieprzyjemne, jest nielogiczne jest

3:30po prostu najgorsze, jeśli chodzi o development. Jest

3:34nieprzewidywalne, trudno to zapamiętać i żeby tego uniknąć można

3:38zrobić coś takiego happy rem to na tym że font-size

3:43dla naszego html'a ustawiamy na 62,5% co

3:47oznacza, że remy teraz będą wynosić równe wartości, czyli

3:52w tym przypadku 1 rem będzie wynosił 10 pikseli

3:56dokładnie. Przez tom że zmniejszyliśmy tutaj zamiast 100 procent,

4:00które wynosi 16 pikseli mamy 62,5%,

4:04które wynosi 10 pikseli i teraz

4:09ktoś może powiedzieć dobra roman, ale teraz sprawiłeś, że domyślą

4:13wielkością w przeglądarce będzie 10 pikseli, czyli zmienimy

4:17wszystkie style na stronie zmniejszając font, więc

4:22możemy temu zapobiec robiąc coś takiego, font-size

4:261,6 rem i to

4:30co tutaj zrobiliśmy to tak, tutaj ustalamy wielkość jednostki rem na 10

4:34pikseli, a tutaj mówimy dobra, ale nadal chcemy, żeby bazową wielkością

4:38fontu w przeglądarce było 16 pikseli, a więc 1,6 rem

4:43po tych zmianach, które sprowadziliśmy tutaj, wynosi 16 pikseli i to

4:47jest o tyle dobrze, że teraz za każdym razem kiedy będziemy chcieli nadać jakąś wielkość obiektom

4:51zależnym od rem, na przykład jakąś szerokość i będziemy

4:55chcieli, żeby to miało 25 pikseli, to nie będziemy musieli nic przemnażać

4:59przez te 16 pikseli bazowych, tylko możemy wpisać 2 i 5 rem i

5:03na tym właśnie polega tak zwane happy rems. Możesz

5:09to sobie wygooglać, też jest kilka artykułów o tym bardzo ciekawych. Jest to bardzo

5:13fajne podejście, które też tak właśnie racjonalizuje cały ten development jeśli chodzi o używanie

5:18tych rozmiarów i to tyle jeśli chodzi o tworzenie naszych globalnych stylów, więc

5:22teraz po prostu musimy wyeksportować sobie ten komponent, który stworzyliśmy, globalstyle,

5:26a następnie zaimportować go w naszym root'owym

5:31widoku. Pamiętaj,

5:35że mamy już absolutnie ścieżki, więc możemy po prostu wpisać theme globalstyle,

5:39a następnie wykorzystać ten komponent jako pierwszy komponent w najbardziej

5:43zewnętrznym widoku, czyli tym root'owym widoku, który będzie przechowywał wszystkie

5:48inne widoki i będzie właśnie takim pierwszym dzieckiem tutaj, który zostanie

5:52wstrzyknięte i dlatego te style, które tam stworzyliśmy będą zaaplikowane

5:56do wszystkich elementów naszej aplikacji. Teraz sprawdźmy czy to

6:00działa i faktycznie, w font'cie jest Montserrat,

6:05musimy zmienić tylko ten button tutaj, bo wygląda okropnie nie mogę

6:09na niego patrzeć. To był tylko test, więc umówmy się o, niech

6:13wygląda tak jak trzeba. Możemy jeszcze dodać jedną właściwość, którą ja zawsze

6:17dodaje. Wtedy fonty wyglądają dużo lepiej, nazywa się to font antialiasing

6:22i zawsze wchodzę na tę stronę,

6:26po prostu kopiując te dwie właściwości i wtedy fonty, które

6:30na przykład są cienkie faktycznie wyglądają na cieńsze niż byłyby kiedy

6:34byśmy tego nie zaaplikowali tutaj w tym miejscu i z racji, że nasze

6:39style zostały poprawnie zaplikowane i stały się globalne to teraz

6:43możemy przejść do kolejnej lekcji.