Как добавить серверный рендер CSS для приложения React Next с помощью Material-ui

Question

У меня есть простое приложение React, встроенное в Next.js, на котором работает экспресс-сервер:

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 для компонентов стиля материала, и я должен убедиться, что компоненты обрабатываются на стороне сервера.

Я пытался следовать этому руководству , но, похоже, не могу адаптировать код для работы с настройкой сервера Express в Next.js

Я считаю, что мне по сути нужно добавить какой-нибудь JssProvider, который будет работать на стороне сервера и на стороне клиента, чтобы оба имели доступ к таблице стилей. Поправь меня, если я ошибаюсь?

Кто-нибудь знает, как этого можно достичь в Next?

Если у кого-нибудь есть ссылка на пример приложения Next.js, которое настроено с помощью SSR Material-ui, это тоже очень поможет.

Спасибо

Answer 1

Я думаю, что это может быть той же проблемой, которую я помог решить в этом вопросе . Он тоже использовал NextJS. Вы можете добавить JssProvider следующим образом:

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

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