Jak zaimplementować MaterializeCss do react?

pytanie zadane 30 kwietnia 2019 w JavaScript przez Hasira Bywalec (2,100 p.)
zamknięte 1 maja 2019 przez Hasira

Witam, tak jak powyżej.. próbowałem wieloma sposobami, ale żaden nie działa tak jak powinnien

1. import w index.js z node_modules (w konsoli nic nie było, ani nie importowało tego)

import 'materialize-css/dist/css/materialize.min.css';

2. bezpośredni link w index.html

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

link bezpośredni działa, css jest załadowany, ale nie działa, co wygląda tak

komentarz zamknięcia: resolved

1 odpowiedź

odpowiedź 30 kwietnia 2019 przez Tpk Nałogowiec (40,100 p.)
wybrane 1 maja 2019 przez Hasira

Najlepsza

1. Ścieżka wygląda na jak najbardziej poprawną, sprawdź w katalogu node_modules czy fizycznie istnieje w nim katalog materialize-css (jeżeli nie zainstaluj: npm install materialize-css@next ).

2. Aby działały ikony musisz dodać jeszcze czcionkę która je zawiera:

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

komentarz 30 kwietnia 2019 przez Hasira Bywalec (2,100 p.)

Ikony mam i instalowałem, więc tak, istnieje

komentarz 30 kwietnia 2019 przez Tpk Nałogowiec (40,100 p.)

W kodzie produkcyjnym nie ma nigdzie linku do fontów.

komentarz 1 maja 2019 przez Hasira Bywalec (2,100 p.)

Nie wrzucam na bieżącąco tego co zrobię na server, ale dziś zaktualizuje

komentarz 1 maja 2019 przez Hasira Bywalec (2,100 p.)

@Tpk, zaktualizowałem to na serverze, o ile dropdown działa jak należy, to sam header i sienav już nie wyświetla tak jak powinno

dodam, że to moje pierwsze zagłębienie w react, nigdy wcześniej w nim nie pisałem

komentarz 1 maja 2019 przez Tpk Nałogowiec (40,100 p.)

Ciężko mi powiedzieć co może być nie tak, bo nie wiem jak to wygląda w kodzie jednak do debugowania mogę polecić Ci rozszerzenie do Chrome - React Developer Tools oraz dorzucenie do projektu ESLint'a żeby na bieżąco widzieć wszelkie nieprawidłowości.