Material UI 1 및 Nodejs/React가있는 서버 쪽 렌더링

문제점 : Cant가 스타일을 가져 오거나 ssr을 통해 처음으로로드되는 것처럼 보입니다.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가 sheetsRegistry.toString()을 호출하는 {createss}를 {css} 위에 둡니다. 내가 열심히 일하는거야? – Karan

Nevermind 나는 당신이 의미하는 바를 알고있다.'''const registeredCss = sheetsRegistry.toString();''나는이 설정을 어디에도하지 않지만, 내 내보내기 defaul에서 createApp()를 호출 한 후에 발생해야한다. 방법. 그러므로 registeredCss는 아무 것도 없습니다. 감사합니다. btw. – Karan

Material UI 1 및 Nodejs/React가있는 서버 쪽 렌더링

답변

관련 문제