Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

makeStyles() declaration location affects css load order

See original GitHub issue

The location of makeStyles() affects the order of css files listed in <head></head> when using Nextjs. This causes issues when base styles override custom styles.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When makeStyles() is declared in index.tsx, styles are properly loaded on the examples below (I added an App bar with MUI Links, not Nextjs Links). The spacing between the links and the button is incorrect in the first Codesandbox, and working properly in the second. The only change is the location of makeStyles(). This repository is forked off of the Nextjs Typescript example.

Broken (`makeStyles()` is in `themes.tsx`)

Link: https://codesandbox.io/s/mystifying-bogdan-h4wq7

Demo

Screenshot_2020-08-01 CodeSandbox(1)

CSS Load order

Screenshot at 2020-08-01 12-30-44

Expected Behavior 🤔

makeStyles() should be the last css style to load. create-react-app does not have this issue.

Not broken (`makeStyles()` is in `index.tsx`)

Link: https://codesandbox.io/s/distracted-framework-2o9fs

Demo

Screenshot_2020-08-01 CodeSandbox(2)

CSS Load order

Screenshot at 2020-08-01 12-31-03

Steps to Reproduce 🕹

Steps:

Move makeStyles() declaration to the same file that uses it. See above codesandbox links.

Context 🔦

Trying to use a central styles configuration rather than having scattered css.

Your Environment 🌎

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Tech	Version
Material-UI	v4.11.0
React	^16.13.1
Browser	FF 79 & Chrome 84
TypeScript	3.9.7
etc.

Issue Analytics

State:
Created 3 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

oliviertassinaricommented, Aug 1, 2020

@esemeniuc We are in the process of dropping our styling engine to rely on the ones used by the community, we have stopped investment on this part one year ago, I don’t think that it’s worth covering.

0reactions

esemeniuccommented, Aug 1, 2020

Could we document this so it doesn’t cause frustration later?