Experienced the same issues with next v9.5.1 on prod build, on dev build the styles are ok.

I am having exactly the same problem: https://github.com/zeit/next.js/issues/11946#issuecomment-615298112

I tried both 2 methods (next-sass and built-in) - the problem existed in both cases

We seem to be having a similar problem with components from a shared component library in our monorepo - any styles in our app that affect those components are overridden by the library styles, despite the fact that the specificity of the styles in our app CSS files is higher and therefore should take precedence. It looks fine in dev mode, just not production 😦

(We are using SCSS modules with @zeit/next-sass)

Same problem here too 😢 I described my problem here: https://github.com/zeit/next.js/pull/11901#issuecomment-614644961

This happens to our production env on next 9.4.4, and somehow we found a solution.

As using node-sass, we try various options from the doc, and solve this by adding a new sassOptions to next.config.js

module.exports = {
  ...,
  sassOptions: {
    outputStyle: 'expanded',
  },
}

Reference: outputStyle

After checking css classname after next build, this seems to be working. Hope this helps!

This bug makes using css-modules in next.js impossible (cause no one wants to add !important in styles)

You can bump up specificity for the styles that override the basic styles. For instance, let’s have components dependency as Button <- IconButton <- MoreSpecificButton. In this case, Button has its own styles that get reloaded when switching to another page and therefore overrides styles from IconButton and MoreSpecificButton. If IconButton has its styles defined as .className.className, and MoreSpecificButton has its styles as .className.className too then Button won’t override it. And having the fact that the order of IconButton and MoreSpecificButton styles is correct in css the styles of MoreSpecificButton will always override IconButton - expected.

Same problem on next 9.4.4. Only in production mode

I use next 9.4.4 with built-in css support and I have this problem too, it happens in production.

I’m having trouble with this bug too. I changed the next-css to built-in css and it happened. It works in development mode, but it doesn’t work in production mode when CSR is used. In SSR, there is no problem.

@EduardoPedrosa Status: v9.3.7-canary.11 and the problem still persist.

in nextjs 10, same issues

This is fixed on the latest Next.js canary. Please upgrade to next@^9.5.3-canary.7 and let us know!

@Howard86 @alexandre-marchina

I am using built-in CSS from next, next 9.4.4 and your solution also dont worked to me. 😢

Same issues 10.0.1

@fabinppk I can confirm that the same issue is still happening as of 9.5.6-canary.11.

@Timer sure. I think your fix its ok and its not related with this problem in devtools. Thank you. 👍

Just wanted to confirm the original issue seems to be fixed in 9.5.3-canary.9. Thank you @Timer

Can you please try 9.5.3-canary.9?

Doesn’t fix it for me, as an example, line heights, font weights, background colors, borders are different in dev and prod.

+1 with Tailwind, Bootstrap. Current workaround is to import all the styles via link rel in the _document.js. For Tailwind it is custom css build. This problem is very annoying.

Experienced the same issues with next v9.5.1 on prod build, on dev build the styles are ok.

I am experiencing the same issue.