Videos
One option like you said is to copy all of the css over, and then hide their import. That may be more work than you need depending on what you're trying to do.
I would probably rather create an override.scss and specifically overwrite rules, which with scss nesting shouldn't get too crazy. But one tip to avoid using !important is to be more specific with the way you target HTML elements. For instance, if there is a CSS rule of
body header ul a { color: pink; }
then you can override a rule by being more specific and write:
body header ul li > a { color: blue; }
However if the rule you're trying to overwrite has !important in it, then you'll have to use !important in your new rule overwrite it.
Hmm, maybe I could help more if I had access to more code e.g. in codesandbox.io.
Do you try some modular CSS solution? Like Styled-jsx or Styled-Components?
If you would like to use styled-components, this answer could be helpful. PrimeReact and styled-component
A different solution could be, link the stylesheet with PrimeReact before your own stylesheet (inside of your HTML). This solution will require a deep analysis of the style implementation by the webpack.
Hope I could help somehow :)