Cannot use mui theme with emotion css prop

Question

I am trying to implement a dark theme in the web app and moved my styling from just styles.css with overwriting using !important to emotion css prop.

Here is the code from App.tsx, where I create my theme and use ThemeProvider

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: 'SFCompactDisplay',
    },
  },
  palette: {
    primary: {
      main: '#0052cc',
    },
  },
});

console.log(theme);

const App: React.FC = () => (
  <ThemeProvider theme={theme}>
    <Switch>
      <Route path="/login" component={Login} exact />
      <ProtectedRoute path="/" component={Dashboard} exact />
      {/* <Route path="/register" component={Register} /> */}
      <Redirect to="/" />
    </Switch>
    <Toaster
      position="top-right"
      toastOptions={{
        style: {
          fontWeight: 400,
        },
      }}
    />
  </ThemeProvider>
);

Also, here is the code from css.ts, which I then use in one of the components

export const splitContainer = (theme) => {
  console.log(theme);
};

export const content: CSSWithTheme = (theme) => ({
  maxWidth: '800px',
  width: '100%',
  [theme.breakpoints.down('md')]: {
    padding: '0 24px',
    maxWidth: '100%',
  },
});

I get an error stating that any property of theme is undefined. I consoled logged both themes, the first one, in App looks as normal MUI theme with breakpoints, pallete properties, but the one in css.ts looks like this:

I use the splitContainer in Dashboard component

  return (
    <Box css={css.splitContainer}>
      <SideBar tab={tab} setTab={setTab} />
      <Box className="container-main-overview">
        {tab === 1 && <MachineList />}
        {tab === 4 && <AddInstance />}
        {tab === 5 && <Support />}
      </Box>
    </Box>
  );

The styles work, however when I try to use the theme, I get undefined error