Css variables of Primevue styles are not defined in module federation layout app

Question

I try to use feature of customization of the primevue theme and change the prefix for css variables of Primevue style. After checking the changes in layout MF app I unfortunately see that all this changed variables undefined. Is it bug of primevue beta version, or it's a standard problem and can be solved by simple way?

There is an exaple of my mount function.
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router/main.router'
import BootstrapVueNext from 'bootstrap-vue-next'
import VueDatePicker from '@vuepic/vue-datepicker'
import { FontAwesomeIcon } from './plugins/font-awesome'
import Multiselect from '@vueform/multiselect'
import VueClipboard from 'vue-clipboard2'
import { QuillEditor } from '@vueup/vue-quill'
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App)

app.use(router)
  .use(store)
  .use(BootstrapVueNext)
  .use(VueClipboard)
  .use(PrimeVue, {
    theme: {
      preset: Aura,
      options: {
        prefix: 'my-app',
        cssLayer: false
      }
    }
  })
  .component('VueDatePicker', VueDatePicker)
  .component('font-awesome-icon', FontAwesomeIcon)
  .component('multiselect', Multiselect)
  .component('QuillEditor', QuillEditor)
  .mount('#app')

app.directive('click-outside', {
  mounted(el, binding) {
    el.addEventListener('click', e => e.stopPropagation());
    document.body.addEventListener('click', binding.value);
  },
  unmounted(el, binding) {
    document.body.removeEventListener('click', binding.value);
  }
})

Answer 1

Finaly I want to come back to the early version of PrimeVue and apply this style, like in the code fragment below. And it improved the style problem with margins and paddings on Module Federation app side.

&,
* {
  all: revert-layer;
}