[SOLVED] Components does get styled

Moralis General
#1

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).

image
image1080×380 19.9 KB

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.

#2

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