如何在 Meteor 环境中使用 React、Material UI 和 Styled-Components 管理服务器

Question

我已经按照 Meteor 文档中的说明实现了。我添加的所有组件 css 都会被渲染。但是Material UI组件，外观和感觉不像我在客户端版本中那样。

我已经尝试过这个MaterialUI文档，但还没有运气。我也没有使用react-jss.

如果有人知道我可以使用的任何示例项目，那将非常棒。

Answer 1

即使他们使用Bootstrap而不是Material UI，我还是建议您检查管理SSR的样板：cleverbeagle pup，它现在也使用Styled组件。它会让你很好地了解如何实现它，或者你可以尝试将css框架和组件迁移到Material UI。

Answer 2

你可以试试 npm 包 maka-cli，并使用 react、material-ui 和 SSR 生成一个样板应用程序，看看我是如何做到的：

$ maka create NewApp --theme=material --ssr=true --client=react

然后，导航到该文件：

./NewApp/imports/startup/server/index.jsx

您可以看到该应用程序如何使用 SSR 搭建材料 UI 的基架。 请注意，这不是使用最新的材料用户界面(1.0.0-beta.36(...但这可能是一个开始！

/************* SSR Code ********************/
import Routes from '../lib/routes.jsx';
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { onPageLoad } from 'meteor/server-render';
import { StaticRouter } from 'react-router-dom';
import { createMemoryHistory } from 'history';

import { SheetsRegistry } from 'react-jss/lib/jss';
import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import preset from 'jss-preset-default';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import createGenerateClassName from 'material-ui/styles/createGenerateClassName';
import { grey } from 'material-ui/colors';
onPageLoad(sink => {
const history = createMemoryHistory(sink.request.url.pathname);
const App = (props) => (
<StaticRouter
location={props.location}
context={{}}>
<Routes history={history}/>
</StaticRouter>
);
// Create a sheetsRegistry instance.
const sheetsRegistry = new SheetsRegistry();
// Create a theme instance.
const theme = createMuiTheme({
palette: {
primary: grey,
accent: grey,
type: 'light',
},
});
const jss = create(preset());
jss.options.createGenerateClassName = createGenerateClassName;
const html = renderToStaticMarkup(
<JssProvider registry={sheetsRegistry} jss={jss}>
<MuiThemeProvider theme={theme} sheetsManager={new Map()}>
<App location={sink.request.url} />
</MuiThemeProvider>
</JssProvider>
);
const css = sheetsRegistry.toString();
sink.appendToHead(`<style id="jss-server-side">${css}</style>`);
sink.renderIntoElementById('app', html);
});

Answer 3

这个问题的答案非常简单，只需遵循材料 UI 和样式组件文档中的文档，并使用在两个 SSR 主题中实现的函数。

然后，您就有了来自Material UI和样式组件的样式标签，可以正常工作。 我在这里展示了我的 SSR 代码，它遵循如何在流星环境中进行SSR渲染。

SSR 实施文档：

使用样式组件的流星文档

材料用户界面文档

import React from 'react'
import { MuiThemeProvider, createMuiTheme, createGenerateClassName } from '@material-ui/core/styles'
import { SheetsRegistry } from 'react-jss/lib/jss'
import JssProvider from 'react-jss/lib/JssProvider'
import { renderToString } from 'react-dom/server'
import { onPageLoad } from 'meteor/server-render'
import { StaticRouter } from 'react-router'
import { Provider } from 'react-redux'
import { Helmet } from 'react-helmet'
import { ServerStyleSheet } from 'styled-components'
import MainApp from '../imports/app/MainApp'
import store from '../imports/app/store/store'
onPageLoad(sink => {
const context = {}
// Create a sheetsRegistry instance.
const sheetsRegistry = new SheetsRegistry()
// Create a sheetsManager instance.
const sheetsManager = new Map()
// Theme Font Change
const theme = createMuiTheme({
typography: {
fontFamily: 'FuturaPT-Light',
fontWeight: 'normal',
fontStyle: 'normal',
},
})
const generateClassName = createGenerateClassName()
const sheet = new ServerStyleSheet()
const App = () => (
<Provider store={store}>
<StaticRouter location={sink.request.url} context={context}>
<JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
<MuiThemeProvider theme={theme} sheetsManager={sheetsManager}>
<MainApp />
</MuiThemeProvider>
</JssProvider>
</StaticRouter>
</Provider>
)
sheet.collectStyles(<App />)
sink.renderIntoElementById('react-root', renderToString(<App />))
const css = sheetsRegistry.toString()
const helmet = Helmet.renderStatic()
sink.appendToHead(helmet.meta.toString())
sink.appendToHead(helmet.title.toString())
sink.appendToHead(`<style id="jss-server-side">${css}</style>`) // material-ui css attached
sink.appendToHead(sheet.getStyleTags()) // styled-components css attached
// console.log(html)
const preloadedState = store.getState()
sink.appendToBody(
`<div id="pre-loaded-state" style="display:none">${JSON.stringify(preloadedState).replace(
/</g,
'\u003c'
)}</div>`
)
})