如何使用 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 用于材质样式组件，需要确保组件得到服务器端渲染。

我已尝试关注this tutorial，但似乎无法调整代码以适应在 Next.js 中设置 Express 服务器的方式

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

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

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

谢谢

Answer 1

我认为这可能与我在 question 中帮助解决的问题相同。他也在使用 NextJS。您可以像这样添加 JssProvider：

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

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