Warning: Prop `className` did not match. while utilizing rimble within nextjs project

[pkhodaveissi]

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: "BoxStyledBox-ha1bw0-0 BaseButtonStyledButton-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

[schnerd]

I ran into this also.

I set up a custom document for next.js that configures styled components for server side rendering (see example). This at least got styles rendering correctly, however I still see the className mismatch console error you allude to.