Override the styling of the Linkedin badge on webpage

Question

I have created a React webpage, in that I have incorporated a Linkedin badge. Unfortunately it seems to completely over ride my own CSS styling for the entire page.

Is there a way around this?

This is the code I am using:

 useEffect(() => {
    const script = document.createElement("script")

    script.src = "https://platform.linkedin.com/badges/js/profile.js"
    script.async = true
    script.defer = true

    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [])

and the return code:

<div
              class="badge-base LI-profile-badge"
              data-locale="en_US"
              data-size="large"
              data-theme="light"
              data-type="HORIZONTAL"
              data-vanity="kalle-anka-55a89667"
              data-version="v1"
            >
              <a
                class="badge-base__link LI-simple-link"
                href="https://se.linkedin.com/in/kalle-anka-55a89667?trk=profile-badge"
              >
                Kalle Anka
              </a>
            </div>

Answer 1

I don't know why linkedin dev can create a naive css style like this

a {
    text-decoration: none;
    font-weight: 600;
    background-color: transparent;
    border: 0;
    color: #0073b1
}

a:visited {
    color: #0073b1
}

a:hover,a:focus {
    text-decoration: underline;
    color: #006097
}

a:active {
    color: #004b7c
}

a:visited {
    color: #665ed0
}

a:visited:hover {
    color: #544bc2
}

a:visited:active {
    color: #4034b0
}

It overrides my text. The solution is to copy their style, wrap it inside a class, then put it to our source code. And finally remove their style tag programmatically.