Solved it by adding a div in the root component of my app, that wraps everything.

<div id="mfe-container">
   ...everything that was in the app.component.html before...
</div>

I also use my own theme now (using a prebuilt theme was meant as temporary solution anyway). Instead of including the theme in the html element, I include it for the wrapper element from above in my styles.scss

@use '@angular/material' as mat;

// my custom theme file
@use './m3-theme';

// The core mixin must be included exactly once for your application, even if you define multiple themes. 
// Including the core mixin multiple times will result in duplicate CSS in your application.
// https://material.angular.io/guide/theming#the-core-mixin
@include mat.core();

#mfe-container {
  @include mat.all-component-themes(m3-theme.$light-theme);
}

I don't know how to solve this for a prebuilt theme (as that defines the variables for the element). If my solution inspires you to solve it without custom theme, please add it as answer or comment as well. In may case I planned to add a custom theme anyway. If this solution inspires you to solve the same