javascript - 如何使用 Material-ui 为 React Next 应用程序添加 CSS 服务器端渲染

Question

我有一个在 Next.js 中构建的简单 React 应用程序，它正在运行一个快速服务器：

app.prepare()
.then(() => {
  const server = express()

  server.get('/job/:id', (req, res) => {
    const actualPage = '/job'
    const queryParams = { id: req.params.id } 
    app.render(req, res, actualPage, queryParams)
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

我也有用于材质样式组件的Material-UI，并且需要确保组件得到服务器端渲染。

我已尝试按照本教程进行操作，但似乎无法使代码适应在 Next.js 中设置 Express 服务器的方式

我相信我基本上需要添加某种JssProvider将运行服务器端和客户端的东西，以便两者都可以访问样式表。如果我错了，请纠正我？

有人知道如何在 Next 中实现这一点吗？

如果有人有一个使用 SSR Material-ui 设置的 Next.js 示例应用程序的链接，那也将是一个巨大的帮助。

谢谢

标签： javascriptnode.jsreactjsmaterial-uinext.js

Answer 1

I think this could be the same problem I helped to solve in this question. He was using NextJS too. You could add a JssProvider like this:

import JssProvider from "react-jss/lib/JssProvider";

class App extends Component {
  render() {
    <JssProvider>
      *the rest of your material-ui components*
    </JssProvider>
  }
}