Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed universal rendering support with material-ui. #414

Closed
wants to merge 1 commit into from
Closed

Fixed universal rendering support with material-ui. #414

wants to merge 1 commit into from

Conversation

puradox
Copy link

@puradox puradox commented Jan 19, 2016

The Material UI set of components require that navigator.userAgent be defined before rendering styles on the server side.

mui/material-ui#2007

The Material UI set of components require that `navigator.userAgent`
be defined before rendering styles on the server side.

mui/material-ui#2007
@bjfletcher
Copy link

@puradox Hello! Well, it's really great to see this PR - RSK and Material UI is a great combination (-:

A couple of things:

  1. perhaps add a comment above the code to explain its purpose;
  2. even with your change, I still get the following in the build log: Warning: Material-UI: userAgent should be supplied in the muiTheme context for server-side rendering.

Are you on the latest for RSK and Material UI? I'm on today's master for RSK and 0.14.4 for Material UI.

Hopefully we'll get this worked out at some point.

@inian
Copy link

inian commented Feb 17, 2016

@bjfletcher I am using a modified version of RSK and the latest version of Material UI for my project and I can confirm that this change disables the warning for me.

@koistya
Copy link
Member

koistya commented Feb 17, 2016

It will set User Agent globally for all users browsing the site. Maybe it's better to put global.navigator = ''; at the top of server.js or something like that.

@puradox
Copy link
Author

puradox commented Feb 17, 2016

@koistya I agree, it would be better to just set this on the server side.

@bjfletcher
Copy link

An alternative PR that works for me to address the same problem: #453

@koistya
Copy link
Member

koistya commented Feb 21, 2016

Thanks for the PR! Closing in favor of #453.

@koistya koistya closed this Feb 21, 2016
@scozv
Copy link

scozv commented Jun 12, 2016

hi, is it worth to set separated userAgent for muiTheme, see mui/material-ui#3831 ?

That is we add code below in server.js, I use feature/redux branch :

import React, { PropTypes } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

app.get('*', async (req, res, next) => {
    const muiTheme = getMuiTheme({userAgent: req.headers['user-agent']});
    ....
    await match(routes, {
      render(component, status = 200) {
        ...
        data.body = ReactDOM.renderToString(<MuiThemeProvider muiTheme={muiTheme}><div>{component}</div></MuiThemeProvider>);
        data.css = css.join('');
        return true;
      },
    });

@rdewolff
Copy link

Still having this issue. Asked directly in #453

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants