Material-ui: jss styles are inserted at the bottom of <head />

Created on 29 Aug 2017 · 33Comments · Source: mui-org/material-ui

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 is injected at the top of the ". However, I am observing locally that the styles are being injected at the bottom of . 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

docs

Source

rsolomon

Most helpful comment

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.

kgregory on 27 Feb 2019

👍10

All 33 comments

Update: I'm able to get it working using react-jss:

const jss = create(preset());
jss.options.insertionPoint = 'insertion-point-jss';

<JssProvider jss={jss}>
  <MuiThemeProvider theme={theme}>{this.props.children}</MuiThemeProvider>
</JssProvider>

However, I now get console warnings such as:

warning.js?6327:36 Warning: Failed context type: Invalid context `64a55d578f856d258dc345b094a2a2b3` of type `Jss` supplied to `withStyles(FormControl)`, expected instance of `Jss`.

I believe it's because I use Lerna, which is hoisting the jss I've manually installed, but not the one installed by material-ui, since I am using 2 versions (0.19.0 and 1.0beta) for legacy purposes.

I should also note that this introduces a lot of cruft in the way of dependencies and boilerplace. It would be great if we could just declare the insertion point as an argument to MuiThemeProvider.

rsolomon on 29 Aug 2017

The CSS injected by Material-UI to style a component has the lowest specificity possible as the is injected at the top of the

I have observed the opposite default behavior. So that sentence might be 100% wrong. I was expecting the opposite at the time I wrote it.

However, I am observing locally that the styles are being injected at the bottom of the head.

@kof Any reason for this default behavior? If it's not an issue on JSS side, then we are going to have to update the documentation to match the reality.

I'm trying to follow the JSS docs to customize the insertion point via a comment

Our documentation is doing so to handle an external algolia style specificity issue.

oliviertassinari on 29 Aug 2017

I think its a good idea to allow all jss options passed down from mui.

If no insertion point found, JSS will inject at the bottom, as we assume that JSS is used for user styles and some other styles like css normalize/reset should be applied before.

kof on 29 Aug 2017

👎1

If no insertion point found, JSS will inject at the bottom, as we assume that JSS is used for user styles and some other styles like css normalize/reset should be applied before.

This argument is convincing 👍, we need to update the documentation.

oliviertassinari on 29 Aug 2017

I believe it's because I use Lerna, which is hoisting the jss I've manually installed

Yes, this warning makes me think you have a duplicated JSS module. Aside from the warning. Does it work?

It would be great if we could just declare the insertion point as an argument to MuiThemeProvider.

I'm not sure it's something that would be wise to do. Hopefully, we want to merge react-jss and material-ui styling solution. MuiThemeProvider responsibility is the theme, not the styling implementation. It's the JssProvider how has this responsibility. I would rather say that we could make so JssProvider accepts an insertionPoint property. But it's out of the scope of this project.

oliviertassinari on 29 Aug 2017

Yes, this warning makes me think you have a duplicated JSS module. Aside from the warning. Does it work?

Yep it does work.

I would rather say that we could make so JssProvider accepts an insertionPoint property.

I don't have a problem with that, but I will say that it doesn't seem ideal to require including another dependency explicitly just to change a flag.

rsolomon on 29 Aug 2017

Yeah, we break the encapsulation as soon as users need to customize the default behavior, not great. I would encourage you to open an issue on the react-jss side with your use case. There isn't much anything special with Material-UI, I think that all react-jss users are affected by this issue.

oliviertassinari on 29 Aug 2017

So given that the styles generated by JSS are injected at the end of the header, how do we configure JSS with a different insertion point?

The docs say:

If you are experiencing a CSS injection order issue, take a look at the mechanism JSS provides on how to handle this situation. By adjusting the placement of the insertionPoint comment within your HTML body you can control the order that the CSS rules are applied to your components.

But it doesn't look like you expose the instance of JSS you're using so there is no viable way to specify the insertion point when using Material UI.

Undistraction on 6 Sep 2017

@Undistraction I've unfortunately resorted to reconfiguring my other styling solution to insert below JSS, instead of trying to reconfigure JSS itself. The only way I found it possible to reconfigure the JSS insertion point was to manually import jss-react and reconfigure everything that already happens behind the scenes with MUI. It ended up being much easier to configure react-css-modules than keep fiddling with JSS.

rsolomon on 7 Sep 2017

Here is an example of how the documentation is handling it:

Add the comment into the page where needed (don't have other solution with nextsj)
https://github.com/callemall/material-ui/blob/50261b9c2a0830420d4cc32acacf2bfb31ba2b5e/docs/src/modules/components/AppWrapper.js#L15-L19
Tell JSS to use this injection point
https://github.com/callemall/material-ui/blob/50261b9c2a0830420d4cc32acacf2bfb31ba2b5e/docs/src/modules/styles/getContext.js#L29

oliviertassinari on 7 Sep 2017

@rsolomon Thanks for the suggestion, but unfortunately I have CSS Module styles that are being compiled by Webpack - they are in place before the application is initialised and JSS does its thing. So I need to be able to place the insertion point before the CSS generated by Webpack.