Material UI 1とNodejs/Reactを使用したサーバー側レンダリング

問題：Cantは、スタイルを取得してssrを介して送信するか、intsiallyロードするように見えます。Material UI 1とNodejs/Reactを使用したサーバー側レンダリング

私はドキュメントに従っていると言いますが、styleSheets変数はとにかく空であるようです。私のナビゲーションコンポーネントではJSSを使用してwithStylesを使用します。いくつかのドキュメントを読んでから、withStylesを使って私のスタイルシートを自分のサーバーに置くべきでしょうか？しかし、これらのスタイルを保持する変数は何らかの理由で空になります。私は何かを誤解していますか？それは私たちがスタイリングのために必要なものをつかむ必要があるのはここ

serverRender.jsx

が

import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import { Provider } from 'react-redux'; 
import { RouterContext } from 'react-router'; 
import Helmet from 'react-helmet'; 
import serialize from 'serialize-javascript'; 
import { create } from 'jss'; 
import preset from 'jss-preset-default'; 
import { SheetsRegistry } from 'react-jss/lib/jss'; 
import JssProvider from 'react-jss/lib/JssProvider'; 
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; 
import createGenerateClassName from 'material-ui/styles/createGenerateClassName'; 
import { deepOrange, lightBlue, red } from 'material-ui/colors'; 
import staticAssets from './static-assets'; 
// import rtl from 'jss-rtl'; // in-case you're supporting rtl 


const sheetsRegistry = new SheetsRegistry(); 

const theme = createMuiTheme({ 
    palette: { 
    primary: deepOrange, 
    secondary: lightBlue, 
    error: red, 
    }, 
}); 

// Configure JSS 
const jss = create(preset()); 
jss.options.createGenerateClassName = createGenerateClassName; 

const createApp = (store, props) => renderToString(
    <JssProvider registry={sheetsRegistry} jss={jss}> 
    <MuiThemeProvider theme={theme} sheetsManager={new Map()}> 
     <Provider store={store}> 
     <RouterContext {...props} /> 
     </Provider> 
    </MuiThemeProvider> 
    </JssProvider> 
); 

//Grab our css from our sheetsRegistry 
const registeredCss = sheetsRegistry.toString(); 

const buildPage = ({ componentHTML, initialState, headAssets, css }) => { 
    return ` 
<!doctype html> 
<html> 
    <head> 
    ${headAssets.title.toString()} 
    ${headAssets.meta.toString()} 
    ${headAssets.link.toString()} 
    ${staticAssets.createStylesheets()} 
    ${staticAssets.createTrackingScript()} 
    </head> 
    <body> 
    <div id="app">${componentHTML}</div> 
    <script>window.__INITIAL_STATE__ = ${serialize(initialState)}</script> 
    ${staticAssets.createAppScript()} 
    <style id="jss-server-side" type="text/css">${css}</style> 
    </body> 
</html>`; 
}; 

export default (store, props) => { 
    const initialState = store.getState(); 
    const componentHTML = createApp(store, props); 
    const headAssets = Helmet.renderStatic(); 
    const css = registeredCss; 
    console.log(css); 
    return buildPage({ componentHTML, initialState, headAssets, css }); 
};

です。

ナビゲーションはこのようなものに見えることがあります。

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 
import classNames from 'classnames/bind'; 
import AppBar from 'material-ui/AppBar'; 
import Toolbar from 'material-ui/Toolbar'; 
import Typography from 'material-ui/Typography'; 
import Button from 'material-ui/Button'; 
import IconButton from 'material-ui/IconButton'; 
import MenuIcon from 'material-ui-icons/Menu'; 
import { withStyles } from 'material-ui/styles'; 
import styles from '../css/components/navigation.css'; 

// import passTheAuxLogo from '../images/PassTheAux.png'; 

const styleSheet = ({ 
appbar: { 
    width: '100%', 
}, 

flex: { 

}, 

menuButton: { 
    marginLeft: -12, 
    marginRight: 20, 
}, 

navCenter: { 
    display: 'flex', 
    flex: 1 
}, 
}); 

const cx = classNames.bind(styles); 

class Navigation extends Component { 

    constructor(props) { 
    super(props); 
    this.mobile = false; 
    } 
    render() { 
    const mobile = this.mobile; 
    const { classes } = this.props; 
    return (
     <div className={classes.appbar}> 
     <AppBar position="static" color="primary"> 
      <Toolbar> 
      {mobile && (
      <IconButton className={classes.menuButton} color="contrast" aria-label="Menu"> 
       <MenuIcon /> 
      </IconButton>)} 
      <Typography type="title" color="inherit" className={cx('flex')}> 
       PassTheAux 
      </Typography> 
      <div className={classes.navCenter}> 
       <Link to="/dashboard"> 
       <Button color="contrast">Dashboard</Button> 
       </Link> 

       <Link to="/about"> 
       <Button color="contrast">About</Button> 
       </Link> 

       <Link to="/404notfound"> 
       <Button color="contrast">404 Not Found</Button> 
       </Link> 
      </div> 
      <Button color="contrast">Log In</Button> 
      | 
      <Button color="contrast">Sign up</Button> 
      </Toolbar> 
     </AppBar> 
     </div> 
    ); 
    } 
} 


export default withStyles(styleSheet)(Navigation);

は、プロバイダがクライアント上だけでなく、私のアプリの周りに行くべきか？ https://github.com/kkotwal94/KaranPRNB

EDIT：私はJSSを使用する必要がありますか？私はPostCSSを使いたいと思うのですか？

ReactDOM.renderToString()は、それが行わだとしてそれは周りに他の方法では動作しません
sheetsRegistry.toString()が

と呼ばれると呼ばれている：あなたは、実行の次のフローが尊重されることを確認する必要があり

出典

2017-12-05 Karan

あなたのGitHubリポジトリで。

出典

2017-12-06 09:55:30

私のレポには混乱がありますか？私は私の質問（serverRender.jsx）の最初のコードブロックに、変数 'createApp'のために入力しました。これは、renderToStringでそれをラップしています。下のHTMLを生成すると、{css}の上に{createApp}があります。ここでCSSはsheetsRegistry.toString（）を呼び出します。私は一生懸命やっているのですか？ – Karan

Nevermindあなたは何を意味するのか見てみましょう。 '' 'const registeredCss = sheetsRegistry.toString（）;' '私はこれをどこの真中に置いても、私のexport defaulでcreateApp（）を呼び出した後に、方法。したがって、registeredCssは何かで満たされていません、ありがとうbtw。 – Karan

Material UI 1とNodejs/Reactを使用したサーバー側レンダリング

答えて

関連する問題