Why Ant Design CSS looks different on deployment than in development - css

Question

I am currently working on a project where we agreed to use Ant Design library with NextJS and TypeScript
When I test locally using npm run dev everything looks alright, but on npm run build and npm run start the css looks a complete mess.
I tried overriding Ant Design default css using the !important property on various of different classes but I don't think that's a very good approach. Has anyone ever encountered such a problem before?
Here is the package.json file if that's relevant
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint src --ext js,ts,tsx",
"test": "jest --config ./configs/jest.config.js",
"prepare": "husky install"
},
"dependencies": {
"#ant-design/icons": "^4.7.0",
"antd": "^4.18.6",
"axios": "^0.25.0",
"next": "^12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/node": "17.0.12",
"#types/react": "17.0.38",
"babel-jest": "^27.4.6",
"concurrently": "^7.0.0",
"eslint": "8.7.0",
"eslint-config-next": "12.0.8",
"eslint-config-prettier": "^8.3.0",
"eslint-config-ts-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.4",
"jest": "^27.4.7",
"jest-css-modules": "^2.1.0",
"pretty-quick": "^3.1.3",
"typescript": "^4.5.5"
}
}