Well I wonder, how would one create a reusable style for material ui? (emotion).

Normally a style can be written like:

import {styled, css, Theme} from "@mui/material";
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';


const StyledMenuButton = styled(IconButton)(`
  margin-left: 16px;
  max-height: 48px;
`);

export const SomeComponent() {
    return <IconButton>
       <MenuIcon />
    </IconButton>
}

However I tried to make the style snippet reusable for multiple components:

import {styled, Theme} from "@mui/material";
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

const baseStyle = css`
    margin-left: 16px;
    max-height: 48px;
`;

const StyledMenuButton = styled(IconButton)(`${baseStyle}`);

export const SomeComponent() {
    return <StyledMenuButton>
       <MenuIcon />
    </StyledMenuButton>
}

And now the style won't load anymore? How to use reusable styles in emotion?