HTML i CSS · Middle · Pytanie 45 z 75
Komponent React łączy zewnętrzne klasy: className={"p-2 " + props.className} i dostaje p-4. Jaki będzie padding?
- 1Zawsze
p-4: wygrywa klasa zapisana później w atrybucieclass - ✓Poprawna odpowiedź: Zależy od kolejności reguł w CSS, a nie w
class- dlatego istniejetailwind-merge - 3Zawsze
p-2: wygrywa klasa zapisana jako pierwsza w atrybucieclass
Wyjaśnienie
Kolejność klas w atrybucie class nie wpływa na kaskadę: przy równej specyficzności wygrywa reguła, która jest później w pliku CSS. Dlatego wynik p-2 p-4 jest nieprzewidywalny z punktu widzenia komponentu. tailwind-merge (często przez helper cn()) usuwa konfliktujące klasy i zostawia ostatnią.