Angular microfrontend Federation with angular material

Question

I am creating an angular remote app which I want to reuse the components in other apps. In order to do so I have made a test project using angular 12, with angular material and module federation.

The app works fine with exception of components which uses angular material, below you can see the UI in remote and in shell. I also attached my html implementation of the component.

My remote UI

My shell UI

<style> input[type=text] {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid silver;
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 20px;} 

button {
  border: 2px solid silver;
  color: green;
  background-color: white;
  font-size: 16px;
  padding: 10px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  cursor: pointer;} button:active {
  border-color: black; }

#container {
  border: 2px darkred dashed;
  padding: 20px;
}
</style>

<div class="file-picker">
  <div class="row">
    <div class="col-md-3">
      <input type="file" #file placeholder="Choose file" 
       (change)="uploadFile(file.files)" style="display: none">
      <button type="button" class="btn btn-success" mat-button 
       (click)="file.click()">Upload File to bucket <mat- 
        icon>attach_file</mat-icon></button>
      <span *ngIf="convertToSvfService.inProgress"class="upload">
        <mat-progress-bar mode="query"></mat-progress-bar>
      </span>
    </div>
  </div> 
</div>