Best approach to reset default loaded Global Style inside a React component

I have a global styles script as below

/* my_global.scss */

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

/*... and many more (300++ lines) */

These global styles have polluted external components imported from other libraries.

Simple question: how can I keep components from other libraries unchanged and unaffected by these huge my_global.scss styles?

After some research, the possible approaches I found are:

  1. Use pseudo class body:not(.my-library-component) – my_global.scss is a long script, and for personal reasons, this method is not recommended.
  2. CSS reset by importing normalize.css – Considering the growing size of library components, I am unsure if this will have any performance impact.
  3. Using all:unset – this is not supported in IE browser
  4. Introducing classno-theme on external components – this will be similar to, or maybe a part of, method 2, which involved CSS reset. Or maybe I am wrong.

Can anyone shed some lights on this, or suggest any other methods (such as using scss or javascript)?