I have a react component and there are multiple(one.css,two.css,three.css) files defined inside css folder .In APP.js(load1.jsx , load2.jsx,load3.jsx) we are having all the js files configured .
one.css is applied to load1.jsx and two.css is applied to load2.jsx and three.css is applied to load3.jxs but the styles of one.css is overridden by three.css in load1.jxs .
how this can be fixed in the react js.
This is because your 3 stylesheets are applied on your site, which is a single-page application. It is the same as if you imported 3 stylesheets in an html file.
An efficient and clean way for separating your styles would be to use component specific class names. For example, in a component named MyButton, you would use a prefix on all of your class names, like this: myButton-wrapper, myButton-content, myButton-label, etc. A style for a label from one component would never override the one from another component: they would be called myButton-label and myTextField-label for example.
Another solution would be MaterialUI's style lib. In each component, you create a style and apply it to the component. This style will be specific to the component and won't be shared with other components.
Also, if you want some styles to be applied globally, such as a CSS reset or generic styles, you can use a global stylesheet and use it on the root of your application: in App.js.
