React.js, a style CSS w komponentach

Dzień dobry,
Mam problem z React.js (używam TypeScript).
Otóż, gdy tworzę komponenty w folderze 'components', a potem importuje je do App.tsx to style CSS mi się mieszają.
Przykładowo w komponencie A mam divy i w pliku CSS (który znajduje się w innym folderze o nazwie "css"), który jest importowany w komponencie A mam .div{ coś tam }, a potem w komponencie B mam divy i tak samo w pliku CSS importowanym do tego komponentu .div { coś tam }.
Ostylowanie tych divów się miesza.
Czy jest jakiś sposób, żeby to rozdzielić?
Chodzi mi o to żeby style CSS w komponentach się wzajemnie nie wykrywały.
Mam nadzieję, że dobrze to opisałem.
Dodam, że jestem noobem w React.js.

Chodzi Ci o to, że style się nadpisują, bo używasz tych samych klas w obu plikach CSS?

/* plik A */
.box { color: red; }

/* plik B */
.box { background: green; }

/* i tutaj finalnie wychodzi  */
.box {
  color: red;
  background: green;
}

Sposobów na stylowanie aplikacji w Reactcie jest sporo.

• Styled Components
• Tailwind JS
• CSS Modules
• BEM

Poczytaj na ich temat i wybierz to co Ci najlepiej odpowiada

Pamiętaj, że w jednym dokumencie będzie wyświetlone wiele komponentów, zatem musisz nadać div-om oraz innym używanym znacznikom unikalne klasy. W React używasz w tym celu właściwości className="my_div", gdzie my_div to ta unikalna nazwa tj. w innym komponencie pamiętaj o nadawaniu innych nazw. Następnie w CSS odwołujesz się po nazwie tej klasy w celu ostylowania znacznika.

Oczywiście w większych projektach i tak może być problem, z tego też względu wymyślone takie rzeczy jak Styled Components. Ja osobiście używam teraz tylko Tailwind i nie piszę CSS prawie w ogóle.

Jeśli stworzyłeś aplikację za pomocą create-react-app to tam masz od razy dostępne CSS Modules i wystarczy że pliki css będą miały postfiks: *.module.css, dzięki temu będą aplikowane per komponent.
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet

Dziękuję za odpowiedzi. Obczaję CSS Modules oraz StylecComponents