Observing how they do it on the website www.primefaces.org/primereact/showcase/, open Developer view: Elements, and one can notice that choosing a different theme changes css file link in HTML header:

<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-blue/theme.css">

becomes

<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-purple/theme.css">

It is fairly easy to switch link element HREF from one to another.

This page talks about primereact theme switching: Switch Your React App Between Material, Bootstrap and Custom Themes at Runtime

But the method it describes is too convoluted, involves ejecting and custom webpack, to bundle all theme CSS files and import them programmatically, like that:

const changeTheme = (theme) => {
  import(`./${theme}.scss`).then((module) => {
    if (selectedThemeModule) {
      selectedThemeModule.unuse();
    }
    module.use();
    setSelectedThemeModule(module);
  });
}

Instead, grab the example repo where they do method of link HREF swap: github.com/mertsincan/primereact-dynamic-theming/

example-1 has code for the convoluted method from the above page, you can skip it and go to example-2, which is much simpler.

In a nutshell, add to 'public/index.html', in <header> section:

<link id="app-theme" rel="stylesheet" type="text/css" href="saga-blue.css">

And use this function:

const changeTheme = (theme) => {
  let themeLink = document.getElementById('app-theme');
  if (themeLink) {
    themeLink.href = theme + '.css';
  }
}

Then just call changeTheme(XXX) when theme XXX is clicked.

Next put .css files into the right place - just copy all node_modules/primereact/themes/*/theme.css files into public folder (giving them corresponding theme names). Some theme.css reference fonts - search for "url" in each file, and if present, copy corresponding fonts/ directory too.

I should mention that benefits of example-1 is using minified and bundled CSS files, so themes will be switching faster. If that's important, then follow the above linked tutorial and example-1. Also note that example-2 has very similar setup to example-1 (eject and custom webpack config), but only to copy css files to the right output folder, which can be skipped in favor of copying files by hand once.

I was able to use CSS modules and selectively apply global scoping to PrimeReact's themes by modifying webpack.config as follows below.

Original:

{
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },

Modified:

 {
            test: /\.css$/,
            //Exclude 3rd party css that needs to be scoped globally from using
            //css-loader with modules enabled
            exclude: [
              path.resolve('node_modules/primereact/resources/primereact.css'),
              path.resolve('node_modules/primereact/resources/themes/cupertino/theme.css'),
            ],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash_base64:5]'
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },
          //Additional css-loader configuration
          {
            test: /\.css$/,
            //Inlcude only 3rd party css that needs to be scoped globally to use
            //css-loader with modules disabled
            include: [
              path.resolve('node_modules/primereact/resources/primereact.css'),
              path.resolve('node_modules/primereact/resources/themes/cupertino/theme.css'),
            ],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },

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.