Style REACT js material ui body from separate file

Question

I outsourced my theme in a theme.js file, call this in my App.js and wanted to style the different components in the theme. My problem is, that my button does not have the specified font-size and the body isn't styled at all (fontfamily and font-size still default)

Theme.js

import { createTheme, responsiveFontSizes } from '@mui/material/styles';
import * as globals from "../globals.js";
import Comfortaa from '../assets/fonts/Comfortaa.woff2';
import OpenSans from '../assets/fonts/OpenSans.woff2';

export function Theme(){

    let theme = createTheme({
        palette: {
            primary: {
                main: globals.primary,
            },
            secondary: {
                main: '#edf2ff',
            },
        },
        typography: {
            body: {
                fontFamily: 'OpenSans',
                fontSize: 50,
            },
            button: {
                fontFamily: 'Comfortaa',
                fontSize: 24,
            },
        },
        components: {
            MuiCssBaseline: {
                styleOverrides: `
                @font-face {
                    font-family: 'OpenSans';
                    font-style: regular;
                    font-display: swap;
                    font-weight: 400;
                    src: local('OpenSans'), local('OpenSans-Regular), url(${OpenSans}) format('woff2');
                    unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
                }
                `,
                body: {
                    fontFamily: 'OpenSans',
                    fontSize: 50,
                },
            },
            MuiButton: {
                styleOverrides: `
                @font-face {
                    font-family: 'Comfortaa';
                    font-style: regular;
                    font-display: swap;
                    font-weight: 400;
                    src: local('Comfortaa'), local('Comfortaa-Regular), url(${Comfortaa}) format('woff2');
                    unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
                }
                `,
                button: {
                    fontFamily: 'Comfortaa',
                    fontSize: 24,
                },
            },
        },
        
    });
    
    
    theme = responsiveFontSizes(theme);
    return theme;  
}

MyButton.js

import Button from '@mui/material/Button';


export function MyButton(props){

  return (
      <Button variant="contained" color="primary" size="large" style={{borderRadius: 50, minHeight: 56, minWidth: 160,}}><b>{props.buttonText}</b></Button>
  );
}

App.js

import "./App.css";
import { ThemeProvider } from '@mui/material/styles';
import { MyButton } from "./components/MyButton.js";
import { Theme } from "./themes/Theme";
import CssBaseline from '@mui/material/CssBaseline';

function App() {
...

  return (
    <ThemeProvider theme={theme}>
       <CssBaseline />
      <div className="App">
        <header className="header">
          <p>some Text</p>
        </header>
        <h2>Hello World</h2>
        <MyButton buttonText="Hello" />
      </div>
    </ThemeProvider>
  );
}

Use styling in App.css works, but this is not generic, so this is why I am using a theme. Colors are adapted perfectly, but not the typography. My source was: https://mui.com/material-ui/customization/typography/ Any help appreciated.