ConsenSysMesh / ConsenSysMesh/rimble-ui
Warning: Prop `className` did not match. while utilizing rimble within nextjs project
- Dominant language
- JavaScript
- Stars
- 455
- Forks
- 60
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
Using rimble-ui within nextjs project gives this warning:
Warning: Prop `className` did not match. Server: "sc-gsDJrp sc-lgkoQy sc-hIfwMU ctiSSV hJYniQ hUBFOd" Client: "Box__StyledBox-ha1bw0-0 BaseButton__StyledButton-sc-1o9z2ni-0 SolidButton__StyledSolidButton-goy2oa-0 hEwKXO jjNsaJ gxrTYq"
**To Reproduce**
Use one of rimble comps within nextjs
**Rimble UI Version**
```
"dependencies": {
"next": "latest",
"opensea-js": "^1.1.11",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimble-ui": "^0.14.0",
"styled-components": "^5.2.3",
"web3": "^1.3.5"
},
"devDependencies": {
"@types/node": "^12.12.21",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1",
"@types/styled-components": "^5.1.9",
"babel-plugin-styled-components": "^1.12.0",
"typescript": "4.0"
}
```
**Desktop:**
- OS: MACOS
- Chrome
- Version 89
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue names a Next.js project and Rimble components but no source file or test. Start by reproducing the warning with a minimal Next.js app, then compare the server- and client-rendered styled-component className values. Done means the Rimble component hydrates without the reported className mismatch warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100