[SOLVED] Components does get styled

Hi folks, im using Moralis to cook my dapp. It works fine on my local machine, but ConnectButton seems to reject working after deployed (I used NextJS).

As you can see, the button doesn’t get styled at all. It does work, but not style. I add styled-component to my dependencies, but it doesn’t help.

  "dependencies": {
    "@types/styled-components": "^5.1.25",
    "@web3auth/web3auth": "^1.1.1",
    "babel-plugin-styled-components": "^2.0.7",
    "ethers": "5.6.9",
    "magic-sdk": "7.0.0",
    "moralis": "1.8.1",
    "next": "12.2.0",
    "react": "18.2.0",
    "react-blink-text": "^1.0.5",
    "react-dom": "18.2.0",
    "react-moralis": "1.4.0",
    "styled-components": "^5.3.5",
    "web3uikit": "0.1.163"
  "devDependencies": {
    "@types/node": "18.0.1",
    "@types/react": "18.0.14",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.4",
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.0",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.24",
    "typescript": "4.7.4"

Please give me some advice. Thank you all.

I got it fixed, the example from Vercel (https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel) mentionded in the official README works. The key is we need to override the _document.tsx as demonstrated.

1 Like