CSS file global access problem

I created a react project using framework7.
i have two components A.jsx and B.jsx. also i have A.css and B.css in CSS folder which are imported just in their own jsx file(A.css just in A.jsx and B.css just in B.jsx). the problem is that B.css is accessible from A.jsx while B.css was NOT imported in A.jsx. also reverse scenario is true(A.css is accessible from B.jsx ).actually in every component that a CSS file is imported that will have global access from any other component. i just want prevent this behavior.(in pure react apps i don’t have this issue) what should I do?

This is a normal and default behavior for webpack. What you are talking is called “CSS in JS”, search the web, there are a lot of different libs which provides such functionality in addition