Recommand · November 24, 2021 0

Incorrect CSS when React App is deployed with GitHub Pages

The Login page of my application looks like this while on local host. But when I deployed my application with GitHub Pages, it looked like this.

Link of the Application: https://caiocavalcante063.github.io/TrybeWallet/.
Link to my repo: https://github.com/caiocavalcante063/TrybeWallet.

I am not familiarized with deploying applications so I am writing this question in hope that this problem has occurred to more people, and that someone could point me to what should I have a look at in my application.

In a similar question, someone pointed the solution to a specific configuration in the package.json file. Couldn’t find anything but am putting it below if it could help anyone.

{
  "name": "sd-0x-project-trybewallet",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@testing-library/jest-dom": "4.2.4",
    "@testing-library/react": "10.0.4",
    "@testing-library/user-event": "7.2.1",
    "bootstrap": "4.5.2",
    "gh-pages": "^3.2.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-icons": "^3.11.0",
    "react-redux": "7.2.1",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.3",
    "redux": "4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "2.3.0",
    "stylelint-order": "4.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --no-inline-config --no-error-on-unmatched-pattern -c .eslintrc.json . --ext .js, .jsx",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@sheerun/mutationobserver-shim": "0.3.3",
    "eslint": "6.8.0",
    "eslint-config-airbnb": "18.2.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.21.5",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-plugin-react-redux": "3.3.0",
    "eslint-plugin-sonarjs": "0.5.0",
    "jest-localstorage-mock": "2.4.3",
    "stylelint": "13.8.0",
    "stylelint-config-standard": "20.0.0"
  },
  "homepage": "https://caiocavalcante063.github.io/TrybeWallet/"

  1. I am using the same browser when developing as when testing the deployed page.
  2. I don’t have any styling-related extensions on my browser.
  3. I am using pure CSS.

Thanks in advance.