Styles not injected in head on server side rendering

[stevemarksd]

I have a material ui button

export const MenuButton: React.FC<{
  isOpen: boolean
  setIsOpen: (isOpen: boolean) => void
}> = props => {
  const {isOpen, setIsOpen} = props
  return (
    <IconButton
      color="primary"
      aria-label="menu"
      style={{marginLeft: 'auto'}}
      onClick={() => setIsOpen(!isOpen)}
    >
      {isOpen ? <MenuOpenIcon /> : <MenuIcon />}
    </IconButton>
  )
}

And then on the server side renders as

<button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary" tabindex="0" type="button" aria-label="menu" style="margin-left:auto"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></span></button>

Which is fine, but .MuiButtonBase-root styles are not added to the header. Only with javascript enabled tha page actually works. And even with js, it will flicker from no styles to with styles.

config

    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
          pathToStylesProvider: `${__dirname}/stylesProviderProps.ts`,
        },
      },
    },

stylesProviderProps.ts

import { jssPreset } from '@material-ui/styles'
import { create } from 'jss'

const stylesProviderProps = {
  jss: create({ ...jssPreset(), insertionPoint: `mui-inject-first` }),
}

export default stylesProviderProps

When js is enabled this style is added:

<style data-jss="" data-meta="MuiButtonBase">
.MuiButtonBase-root {
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.MuiButtonBase-root::-moz-focus-inner {
  border-style: none;
}
.MuiButtonBase-root.Mui-disabled {
  cursor: default;
  pointer-events: none;
}
@media print {
  .MuiButtonBase-root {
    -webkit-print-color-adjust: exact;
  }
}
</style>

I think this should already be in the html

[stevemarksd]

Also just noticed the guide here https://github.com/hupe1980/gatsby-plugin-material-ui/blob/master/gatsby-plugin-material-ui/README.md#advanced is not correct because mui-inject-first doesnt exist on page, or you need to manually create yourself.

[stevemarksd]

Seems related to https://github.com/hupe1980/gatsby-plugin-material-ui/issues/1

[goleary]

I'm having the same issue.

Strangely this starter doesn't seem to experience the issue: https://github.com/dominicabela/gatsby-starter-material-ui

I haven't been able to figure out what's different about my project that all of the css is injected after and not included in the statically rendered page.

[goleary]

I experienced this issue because the installation guide for the plugin suggested installing @material-ui/styles along with this plugin. I'm not sure why but this introduces a build issues that results in the page css not being included at build time and a nasty flash of the page with out and with styles when viewed.

I fixed this by removing @material-ui/styles and nuking node_modules and reinstalling.

I also created #56 to update the docs in the hopes that no poor soul wastes as much time as I did in the future.

[cpitt]

I know this is closed but just adding for those who may experience similar issues.

Uninstalling @material-ui/styles and nuking node_modules, as @goleary suggested, was not enough in my case . Doing so simply resulted in "missing @material-ui/styles" errors on build.

Thankfully @goleary's suggestion got me looking a dependencies and helped me solve it for my case though.

I ended up having to remove all @material-ui/* packages and reinstall before the issue would resolve. I suspect it has something with some sort of version mismatch, but have not attempted to reproduce the issue

This is what was in package.json before

    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "@material-ui/pickers": "^3.2.10",
    "@material-ui/styles": "^4.10.0",
    "@material-ui/system": "^4.9.14",

This is after

    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",