question-mark
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.

jss styles are inserted at the bottom of <head />

See original GitHub issue

Problem description

The v1 documentation here states that, “The CSS injected by Material-UI to style a component has the lowest specificity possible as the <link /> is injected at the top of the <head />”. However, I am observing locally that the styles are being injected at the bottom of <head />. I do not have any custom configuration set for JSS, so I don’t believe anything in my codebase would be causing the difference in behavior.

I’m trying to follow the JSS docs to customize the insertion point via a comment, but everything I do within jss.setup() seems to be overriden with a MUIThemProvider that usesmuiThemeProviderFactory.js, which I don’t have direct access to.

The docs examples use getContext, but that seems like a lot of extra boilerplate just to set a CSS insertion point. Does anyone have any advice on how I can get the JSS styles to actually render at the bottom of the <head /> element?

I’m reporting this here instead of SO, because I believe that the documentation is incorrect, and could use some examples for what I would expect to be a common use case for MUI consumers that don’t also rely on JSS as their primary styling solution.

Versions

  • Material-UI: 1.0.0-beta.6
  • React: 15.6.1
  • Browser: Chrome latest

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:33 (20 by maintainers)

github_iconTop GitHub Comments

13reactions
kgregorycommented, Feb 27, 2019

Perhaps you should try knowing more before pointing fingers.

@waynebloss Perhaps you should try a different approach when communicating with people who dedicate a large portion of their lives to something you benefit from without the expectation of payment.

12reactions
wayneblosscommented, Feb 27, 2019

I’m guessing you also think reporting bugs isn’t contributing too lol.

Hey everybody!! Stop reporting bugs to MUI, they don’t need you. kthxbai!!

Read more comments on GitHub >

github_iconTop Results From Across the Web

jss styles are inserted at the bottom of <head /> #7944 - GitHub
I think its a good idea to allow all jss options passed down from mui. If no insertion point found, JSS will inject...
Read more >
JSS integration with React
Install · Basic · Dynamic Values · Prefix classname · Theming · Accessing the theme inside the styled component · Accessing the theme...
Read more >
JSS integration with React
Style tags are injected in the exact same order as the injectSheet() invocation. Source order specificity is higher the lower style tag is...
Read more >
How do i configure makeStyles hook in material-ui with a ...
However all style-sheets created using makeStyles hook are not getting applied as the are inserted into the head section of the browser DOM....
Read more >
Move css to bottom of head instead of top - help - Meteor forums
I have a project which uses Material-UI, and it uses a lot of JSS throughout. All of the CSS that JSS outputs gets...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found