Repository: material-ui
Issue: Using ClassNameGenerator with Next.js causes ButtonGroup and the Autocomplete dropdown to render incorrectly
Labels: bug 🐛,nextjs

### Duplicates

- [X] I have searched the existing issues

### Latest version (5.5.0)

- [X] I have tested the latest version

### Current behavior 😯

The appearance of ButtonGroup and the Autocomplete drop down are not rendered properly.  The ButtonGroup buttons appear next to each other, but are not "merged" into one button.  The Autocomplete dropdown does not have any padding around list and styles are not applied.
![image](https://user-images.githubusercontent.com/18493283/156820940-176a23a8-3b82-46e2-8307-8f0708955a3e.png)
![image](https://user-images.githubusercontent.com/18493283/156822137-e0b12d58-b63e-41fa-a8a3-d63e391776fa.png)

I think this is caused by missing pseudo selectors in the browser side code.  This _may_ be caused by the getInitialProps code in _document.tsx.

Please note that commenting out ClassNameGenerator code in _app.tsx in the CodeSandbox may not take effect until the server is restarted, but then you will see the proper behaviour of the two components.

### Expected behavior 🤔

The appearance of the ButtonGroup should be as follows:
![image](https://user-images.githubusercontent.com/18493283/156821402-ff5d7265-8d87-4c60-83b8-d194fd5505a0.png)
![image](https://user-images.githubusercontent.com/18493283/156822290-5a92c1d5-c879-4e5c-81a2-078e8f1e433d.png)


### Steps to reproduce 🕹

I've provided a [CodeSandbox](https://codesandbox.io/s/testbuttongroup-m7vz2o?file=/pages/_app.tsx) that shows the situation.

1. Set up a project with Next.js and MUI as per the [Next.js (TypeScript version)](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript)
2.  Alter the componentName returned from ClassNameGenerator.configure
3. Use the ButtonGroup or Autocomplete components

### Context 🔦

First of all, Thank you for such a great product.  This is my first issue.

In my case, this is not critical, but it took me a long time to figure out why the ButtonGroup was not working properly.  It would be a problem if there happens to be conflicting MUI implementations as in [Issue 30925](https://github.com/mui/material-ui/issues/30925)

### Your environment 🌎
Tried this on both Chrome and Firefox

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
    Memory: 12.65 GB / 31.95 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Managers:
    pip3: 21.3.1 - D:\Lib\Python39\Scripts\pip3.EXE
  Utilities:
    Git: 2.28.0.
  Virtualization:
    Docker: 20.10.12 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
  IDEs:
    VSCode: 1.65.0 - C:\Program Files\VS Code\bin\code.CMD
    Visual Studio: 16.8.31005.135 (Visual Studio Community 2019)
  Languages:
    Bash: 5.0.3 - C:\Windows\system32\bash.EXE
    Python: 3.9.9
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.30)
    Internet Explorer: 11.0.19041.1202
  Monorepos:
    Yarn Workspaces: 3.2.0
    Lerna: 4.0.0