CODEWITHSUNDEEP
next.jsmaterial-uinext.js13app-routerreact-server-components
yoty66
yoty66

Reputation: 746

MUI useTheme in a server component

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"

Upvotes: 5

Views: 4013

Answers (1)

mapache-salvaje
mapache-salvaje

Reputation: 705

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.

Upvotes: 6

Related Questions