CSS module classes work on development, but are overridden on production

All the styles on my project are defined inside css modules, and only recently I noticed that, on the production build generated by Nextjs, some of them are overridden by other styles (this would only make sense if they were defined on the same module, which is not the case). This breaks my app on production, but everything seems to work just fine on development.

Here's an example:

///mobile.module.css
 .expandIcon {
    width: 12px;
}

///mobile.tsx
import React from "react";
import styles from "./mobile.module.css";
import { NextPage } from "next";
import OpenInFullRoundedIcon from "@mui/icons-material/OpenInFullRounded";

const mobile: NextPage = () => {
  return <OpenInFullRoundedIcon className={styles.expandIcon} />
};

export default mobile;

Here's how this class is loaded on development:

And here's how it's overridden on prod:

And to make it worse, the class overriding mine is not even defined on my project. I'm somewhat new to NextJs, so I would appreciate any insight on this issue.

So, as pointed out by ali.zabetpour, the issue is related to how some external libraries's styles are prioritized over custom styles after building, in this case, Material ui/Mui. Here is a link to Mui's docs that explains this in detail and offers a solution using their StyledEngineProvider component, which solved my problem: https://mui.com/material-ui/guides/interoperability/#css-injection-order-3