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.

[4.0.1-beta] Unwanted CSSStyleSheet.insertRule behavior when using styled (passing a function as a param for styles)

See original GitHub issue

This is not a v0.x issue.
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

All styles should be internal in DOM, i.e. the actual CSS should be inlined in the <style>'s tags in the <head>. Why? Because Prerendering doesn’t work otherwise as the styles, instead of being internal, are directly inserted into the CSSStyleSheet, using insertRule (the process is so-called the speedy mode). More info:

Current Behavior 😯

Common Header for the following two examples:

import { styled } from "@material-ui/styles"
const component = (props) => <div {...props} /> // just an example

Works great if using without accessing props, resulting in internal css, rendered in DOM:

export const Div = styled(component)({
  width: `100%`,
})

Uses unwanted CSSStyleSheet.insertRule, not rendering CSS in DOM, directly applying styles to the CSSStyleSheet:

export const Div = styled(component)((props) => ({ // IMPORTANT! Note passing the function
  width: `100%`,
}))

Your Environment 🌎

  "dependencies": {
    "@material-ui/core": "4.0.0-beta.1",
    "@material-ui/styles": "4.0.0-beta.1",
    "react": "16.8.6",
    "react-dom": "16.8.6"
  }

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:18 (9 by maintainers)

Top GitHub Comments

4reactions

eps1loncommented, May 13, 2019

This is best discussed in an issue in the Jss repo. It seems like the decision was made consciously. Please reference the original issue there so that anybody searching for a solution here is properly forwarded.

It would be interesting to know how other styling solution solve this.

@o-alexandrov I would suggest you change your tone to be less prescriptive. At least for me it’s not obvious from this issue why the current approach was chosen. You saying that it should not be chosen sounds like you either know better and don’t want to share knowledge or you don’t know the full story and act like you do. Either way isn’t constructive at all.

3reactions

o-alexandrovcommented, May 13, 2019

@eps1lon

Please reference the original issue there so that anybody searching for a solution here is properly forwarded.

Please be informed that in this post above I actually:

created a separate issue
described everything in detail there also
mentioned that I solved the issue I was having with Prerendering and steps to follow to resolve for others

I am surprised to see detailed explanations to be met with something other than gratitude.
Regarding the tone, it is again surprising to see the answer in great detail expressing nuances to a question that could be easily Google’d.
- If I asked someone a question that I could then find as a first link on Google, I would feel deeply sorry to wasting someone’s time, it is surprising to see a disagreement on this.
Regarding the:

it’s not obvious from this issue why the current approach was chosen. You saying that it should not be chosen sounds like you either know better and don’t want to share knowledge or you don’t know the full story and act like you do

I have provided you in this discussion with:
- code samples, such as this benchmark from the mentioned above issue
- extremely detailed explanations above, including screencasts, and explanation of terminology

I am sad to see such misinterpretation of the discussion, and I am sincerely sorry for the tone that you seem to interpreted as prescriptive. On the other hand, I hope you consider to offer more understanding to those, like me, whose English is not the first language and thus would know, that the tone might simply be something you are not used to growing up in a different culture.