React - ClassName nie działa dla diva zwróconego na podstawie warunku

Question

Witam, niedawno zacząłem się uczyć Reacta i postanowiłem napisać pierwszy większy projekt. Natrafiłem na pewien problem mianowicie mam pewien Component, któremu w propsie przekazuje wartość state'a i na podstawie warunku próbuje wyświetlić odpowiednią zawartość, wszystko działa wyśmienicie jednak jest pewien problem, gdyż próbując oscylować te elementy nie ustawiają one stylów klasy którą im nadałem oto mój kod:

const Content = (currentPage) => {
  {
    if (currentPage.currentPage === "Home Page") {
      return (
        <section className="content">
          <About></About>
        </section>
      );
    } else {
      return (
        <section className="content">
          <ToDo></ToDo>
        </section>
      );
    }
  }
};

co ciekawe jeżeli dodam atrybut style to ten styl się wczytuje natomiast kiedy robię do w pliku scss to nie działa (zainstalowałem node-sass). Czy wie ktoś jak można by rozwiązać ten problem? Z góry dzięki za pomoc.

Comments

Sprawdź (np. w DOM Inspectorze), czy elementy <section> wyjściowo mają nadaną klasę "content"? Jeśli tak, to czy plik SCSS, w którym ostylowałeś te klasy, jest dołączany na stronie jako CSS? Powinieneś to też widzieć w zaaplikowanych stylach we wspomnianym DOM Inspectorze.

---

mają w zakładce elements jak i w zakładce styles. Plik css jest ładowany bo inne style działają.

---

Czyli ten element wyjściowo ma nadaną odpowiednią klasę i w CSS ta klasa ostylowana? A czy style dla tej klasy nie są nadpisywane przez inne? Możesz pokazać screen z DOM Inspectora z tym elementem i jego stylami?

---

Zakładka elements:
zakładka styles:

Tak jak pisałem wszystkie inne style działają tylko ten nie i nie widzę by były one nadpisywane ponieważ jak dodam !important to nadal się nie wyświetlają

---

Hmm, a w którym miejscu korzystasz ze zmiennych? Wartości przypisane do styli wydają się ok, więc nie wiem w czym tu jest problem.

---

Problem rozwiązałem aż głupio mi się przyznać na czym polegał ale powiem tak raczej nikt nie będzie miał podobnego problemu

---

Możesz się podzielić jaka była przyczyna problemu. Nie ma się czego wstydzić - głupie błędy się zdarzają. ;)

---

pewnie w stylach źle zapisał coś :D