Question

问题：似乎无法通过ssr获得发送或加载的样式。

我正在关注文档并试图按照它说的去做，但是styleSheets变量似乎仍然是空的。在我的导航组件中，我使用JSS并使用withStyles。从阅读一些文档，使用withStyles应该在我的服务器上填充我的样式表吗？但是，由于某些原因，保存这些样式的变量最终会变空。我误解了什么吗？

serverRender.jsx

_length

这里应该抓住我们造型所需的东西。

导航可能如下所示：

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 });
};

提供商是否应该绕过我的应用程序以及客户端？ https://github.com/kkotwal94/KaranPRNB

编辑：我想在这个问题的另一个问题是我必须使用JSS，如果我想使用PostCSS，可以这样做吗？

Answer 1

您需要确保遵守以下执行流程：

ReactDOM.renderToString()被称为
sheetsRegistry.toString()被称为

它将无法正常工作，因为它在您的GitHub存储库中完成。

使用Material UI 1和Nodejs / React进行服务器端渲染

1 个答案: