MUI useTheme in a server component

Question

How do I use the my MUI (material ui) theme definition in a server component. I'm usually using the very useful useTheme hook. But this forces me to make it a client component, using the 'use client' directive. I would like to be able to do something like:

'use client'
function TopRow(){
    const theme = useTheme()
    return (
  <Typography color={theme.palette.colors.green}>
                    2.2%
                </Typography>
)

but without making it a client component.

Tech stack:

    "@emotion/cache": "latest",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@material-ui/icons": "^4.11.3",
    "@mui/icons-material": "^5.14.14",
    "@mui/material": "^5.14.14",
    "next": "13.x",
    "react": "18.x",
    "react-dom": "18.x"

Answer 1

MUI components can only be used as Client Components at this time. The source of the problem here specifically is that useTheme makes use of React's useContext hook, which isn't compatible with Server Components. You can follow this umbrella issue to keep up with the latest updates about improving support for Next.js with Material UI.