Sprawdź 1 + 4 Biblioteki CSS-in-JS dla Reacta do użycia w 2020

Komponenty w React renderują UI na podstawie albo stanu wewnętrznego, albo przekazanych propsów:

const button = ({onClick, primary}) => {
  const [clicked, setClicked] = useState(false);

  const classes = classNames({
    'button': true,
    'button--active': clicked,
    'button--primary': primary,
  });

  return (
   <button
     onClick={() => {setClicked(!clicked); onClick();}}
     className={classes}
    >
     Click
    </button> 
   );
}

Choć widzimy i rozumiemy w jaki sposób dodawane są klasy, czy możemy być pewni jak komponent będzie wyglądał? Nie, ponieważ:

  1. Niekoniecznie wiemy gdzie zdefiniowane są klasy dla przycisku
  2. Jeżeli wiemy, niekoniecznie wiemy czy przypadkowo gdzieś ich nie nadpiszemy
  3. Jeżeli sprawdziliśmy i wiemy, że nie są nadpisane – ktoś kto używa tego komponentu poza naszym projektem może te klasy nadpisać i zmienić zachowanie komponentu nawet nie mając takiego zamiaru

Dodatkowo – jeżeli chcemy sprawdzić co konkretnie kryje się pod każdą klasą, musimy szukać w pliku stylów – poza komponentem. Musimy też o pliku stylów pamiętać podczas przenoszenia np do innego projektu, co ogranicza przenaszalność kodu.

Jeżeli chcielibyśmy uniknąć tego typu problemów możemy napisać style inline:

 const button = ({onClick, primary}) => {
  const [clicked, setClicked] = useState(false);

  return (
   <button
     onClick={() => {setClicked(!clicked); onClick();}}
     style={{
       //jakieś style bazowe
       backgroundColor: primary? 'blue': 'white',
       borderWidth: clicked? '2px' : '1px,
     }}
    >
     Click
    </button> 
   );
} 

Ale zabiera nam to na przykład pseudoselektory czy media query.

Jednym z możliwych rozwiązań jest CSS-in-JS.


Spis treści

  1. CSS in JS
  2. Styled-components
  3. Inne biblioteki CSS-in-JS
    1. Emotion
    2. JSS
    3. Styled-jsx
    4. Aphrodite
  4. Porównanie popularności bibliotek CSS-in-JS
  5. Podsumowanie
Czytaj dalej Sprawdź 1 + 4 Biblioteki CSS-in-JS dla Reacta do użycia w 2020