React / Next.js

Styling & CSS-in-JS

CSS Modules, styled-components, Tailwind CSS, style inline, theming

18 pytań z rozmów·
Mid-Level
1

Czym jest CSS Module w React?

Odpowiedź

CSS Modules automatycznie generują unikalne nazwy klas, dodając hash do nazwy klasy, co zapobiega konfliktom stylów między komponentami. Każdy plik CSS Module ma własny lokalny scope, w przeciwieństwie do tradycyjnych globalnych arkuszy stylów. Podejście to pozwala pisać modularne style bez ryzyka przypadkowego nadpisania w innych komponentach.

2

Jaka jest główna zaleta styled-components?

Odpowiedź

Styled-components umożliwia pisanie CSS bezpośrednio w plikach JavaScript przy użyciu template literals, co ułatwia tworzenie dynamicznych stylów opartych na props komponentu. Podejście to eliminuje ręczne mapowanie między klasami CSS a komponentami i zapewnia, że tylko style zamontowanych komponentów są wstrzykiwane na stronę. Kolokacja stylów z logiką komponentu poprawia również łatwość konserwacji kodu.

3

Jak zaimportować CSS Module w komponencie React?

Odpowiedź

Aby zaimportować CSS Module, użyj standardowej składni importu JavaScript z nazwą pliku kończącą się na .module.css i przypisz wynik do zmiennej zawierającej obiekt z przekształconymi nazwami klas. Zgodnie z konwencją zmienna ta często nazywa się 'styles'. Klasy można następnie stosować za pomocą atrybutu className, używając notacji obiektowej. Podejście to zapewnia, że nazwy klas są unikalne i ograniczone do komponentu.

4

Jaka jest główna cecha Tailwind CSS?

5

Jaka jest główna wada stylów inline w React?

+15 pytań z rozmów

Opanuj React / Next.js na następną rozmowę

Uzyskaj dostęp do wszystkich pytań, flashcards, testów technicznych, ćwiczeń code review i symulatorów rozmów.

Zacznij za darmo