Stylowanie aplikacji

Stylowanie aplikacji

1. Szukamy czy jest odpowiedni komponent MaterialUI spełniający nasze zadanie
2. Sprawdzamy czy komponent z MaterialUI:

• jest podobny do tego co mamy zaimplementować (jak w Figmie)
• udostępnia on dodatkowe funkcjonalności, których nie mają wbudowane komponenty Reacta (np. walidację inputu email).

Któryś z warunków z punktu 2 jest spełniony

1. Wybieramy komponent z Materiala.
2. Style tworzymy w tym samym pliku co komponent

Żaden z warunków nie jest spełniony

1. Piszemy swój komponent nie używając materiala np. tak jak Button:

export default function Button(options: ButtonOptions): JSX.Element {
    return <button {...rest} ref={ref} className={`btn btn-${variant}`} />;
  }
);

2. Tworzymy styl do komponentu w pliku scss o nazwie _{nazwaKomponentu}.scss.

Jeśli komponent jest często używany w aplikacji to umieszczamy go w osobnym folderze w common-components.