Styles not working in production angular material with module federation

Question

I have a project with angular material and module federation, I'm using a mat form field in my host/shell, where locally works fine but in another environment, the mat form loses the styles.

Code webpack config:

shared: share({
            "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
            "@angular/flex-layout": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
            "@angular/material": { singleton: true, strictVersion: true, requiredVersion: '>=11.0.0' },
            "@angular/animations": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
            rxjs: { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true, },
            ...sharedMappings.getDescriptors()
        })

And I added the styles in angular.json but it still does not work.

"styles": [ "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "project/src/styles.scss" ],

local: https://i.stack.imgur.com/q6NGe.png
prod:  https://i.stack.imgur.com/kzPKw.png