Bueno, me pregunto, ¿cómo se crearía un estilo reutilizable para material ui? (emoción).

Normalmente, un estilo se puede escribir como:

 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> }

Sin embargo, traté de hacer que el fragmento de estilo fuera reutilizable para varios componentes:

 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> }

¿Y ahora el estilo ya no carga? ¿Cómo usar estilos reutilizables en emoción?