SVGs override each others CSS-style
There is nothing you can do other than modifying the class names in each SVG so that they don't clash.
It looks like you are using Illustrator to produce those SVGs. To work around the problem, make sure you tell Illustrator, when you save the SVG, to not use <style> elements for element styling.
When you save, use File > Save As > SVG, then click on "More Options" and change the "CSS Properties" setting. If it is set to "Style Elements", change it to one of the other options. If you do that, it won't use classes and your SVGs won't clash with one another.
To fix your current SVGs, you should be able to load them in, then resave them using the method above.
Try targeting them via CSS using children:
.cls-3:first-child { fill:yellow;}.cls-3:nth-child(2) { fill:red;}...
.cls-3:last-child { fill:blue;}Fill with what colors you need to see if it works. If that does not overwrite it, you may need to use !important, although it is not a best practice, rather a worst case scenario.