[NextJS] `Warning: Prop className did not match`

[laclance]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I have looked at the other issues and tried the code from examples below but still get the same error. Maybe because I'm using @mui/material/styles? https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs-with-typescript https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript https://github.com/mui-org/material-ui/tree/master/examples/nextjs https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Expected behavior 🤔

Server classNames to match client.

Steps to reproduce 🕹

Steps:

1. Create nextjs-app
2. Add code from examples
3. Add styles
4. Run App

Context 🔦

Add css classes with @mui/material/styles.

Your environment 🌎

`npx @mui/envinfo`

using brave browser ``` System: OS: Windows 10 10.0.19042 Binaries: Node: 14.18.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62) npmPackages: @emotion/react: ^11.7.0 => 11.7.1 @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.61 @mui/icons-material: ^5.2.0 => 5.2.5 @mui/material: ^5.2.1 => 5.2.5 @mui/private-theming: 5.2.3 @mui/styled-engine: 5.2.5 @mui/styles: ^5.2.1 => 5.2.3 @mui/system: 5.2.5 @mui/types: 7.1.0 @mui/utils: 5.2.3 @types/react: 17.0.37 => 17.0.37 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: 4.5.4 => 4.5.4 ```

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[laclance]

i did, all you have to do is add a class with useStyles hook

[mnajdova]

If you want to use JSS you need to configure it. We do not recommend using both in new projects, hence we don't have them in the examples project. Take a look on how you can do it in https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs-with-typescript

I can't do anything without a reproduction. It is not clear which versions of the library you use, how you configured SSR etc.

i did, all you have to do is add a class with useStyles hook

Adding only this will not yes, you need to configure SSR.

[mnajdova]

BTW you can see how to configure JSS on this example - https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs-with-typescript (v4)

[laclance]

yes as i mentioned thats where i copied code from and cant use codesandbox This expression is not callable. Type 'typeof import("/sandbox/node_modules/@mui/material/styles/index")' has no call signatures

[laclance]

but as i mentioned i tried all the configurations from these

https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs-with-typescript

https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

[laclance]

so i'm presuming my only solutions are to downgrade to v4 or change everything to styled components?

[mnajdova]

Again, just share a simple reproduction of what you have and where you see the error and I can provide some guidance. I cannot guess what you have in the project.

but as i mentioned i tried all the configurations from these

If you want to use both v4 MUI (@mui/material) and JSS (@mui/styles) you will need to configure both JSS and emotion (combination of how these can be configured can be found in):

• JSS - https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs-with-typescript
• emotion - https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript

[laclance]

ok thanks so it seems the error only arises when passing arguments to makeStyles.

interface StyleProps {
    isGrey: boolean;
}

const useStyles = makeStyles<Theme, StyleProps>(
  () => ({
    signInButton: ({ isGrey }) => ({
      color: isGrey ? 'grey' : "white",
    }),
  })
);

[laclance]

https://github.com/laclance/mui-styles

[laclance]

I know there is a codemod to help migrate JSS styles to styled but it doesn't work where props are used and I have a lot of components that use style props.

[mnajdova]

It's clear now. It is a duplicate https://github.com/mui-org/material-ui/issues/26876 and possible more others. You need to move to v5 the issue is solved there. We do not plan to backport fixes in v4 (and @mui/styles) at this moment.

[laclance]

I am on v5

[laclance]

    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.61
    @mui/icons-material: ^5.2.0 => 5.2.5
    @mui/material: ^5.2.1 => 5.2.5
    @mui/private-theming:  5.2.3
    @mui/styled-engine:  5.2.5
    @mui/styles: ^5.2.1 => 5.2.3
    @mui/system:  5.2.5
    @mui/types:  7.1.0
    @mui/utils:  5.2.3
    @types/react: 17.0.37 => 17.0.37
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: 4.5.4 => 4.5.4

[laclance]

oh do you mean @mui/styles is technically v4?

[laclance]

Obviously want to move away from useStyles but have lot's of components so will take a bit of time. Importing components with next/dynamic resolves the issue for now. Wondering how to convert to styled components though. Code below gives same PropclassNamedid not match error as above and/or the one below.

interface StyleProps {
  isGrey: boolean;
}

const StyledDiv = styled("div")<StyleProps>(
  { shouldForwardProp: (prop: any) => prop !== "isGrey" },
  (props: any) => ({
    backgroundColor: props.isGrey,
  })
);

const Home: NextPage = () => {
  return <StyledDiv isGrey={true}>hello world</StyledDiv>;
};

React does not recognize the `isGrey` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isgrey` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

But then how to add theme variables together with style props? Only solution I found is this one https://mui.com/system/styled/#custom-components, but that's seems excessive for the amount of components and style props I have?

[laclance]

I see there is this https://www.npmjs.com/package/tss-react

[siriwatknp]

@laclance the correct syntax is this:

import { styled } from '@mui/material/styles';

interface StyleProps {
  isGrey: boolean;
}

const StyledDiv = styled("div",  { shouldForwardProp: (prop) => prop !== "isGrey" })<StyleProps>(
  (props: any) => ({
    backgroundColor: props.isGrey,
  })
);

const Home: NextPage = () => {
  return <StyledDiv isGrey={true}>hello world</StyledDiv>;
};

[laclance]

That's exactly what I tried which gave me those errors. I updated the repo https://github.com/laclance/mui-styles/

[laclance]

@siriwatknp any update please? I updated packages and still get the same errors https://github.com/laclance/mui-styles/

[siriwatknp]

@laclance Please take a look closely at the shouldForwardProp. It should be inside 2nd argument of styled.

This is WRONG:

const StyledDiv = styled("div")<StyleProps>(
  { shouldForwardProp: (prop: any) => prop !== "isGrey" },
  (props: any) => ({
    backgroundColor: props.isGrey,
  })
);

This is CORRECT:

const StyledDiv = styled("div", { shouldForwardProp: (prop: any) => prop !== "isGrey" })<StyleProps>(
  (props: any) => ({
    backgroundColor: props.isGrey,
  })
);

[laclance]

ah, sorry, thank you.