如何在 MaterialUI 4 中使用 react-jss？

Posted 2023-02-22

【中文标题】如何在 MaterialUI 4 中使用 react-jss？

【英文标题】：How to use react-jss with MaterialUI 4?

【发布时间】：2019-10-14 09:31:26

【问题描述】：

我已经使用react-jss 和material-ui 有一段时间了。 material-ui 3.x -> 4.x 迁移指南说 MUI 4 与 React JSS 9.x 不兼容：

https://material-ui.com/guides/migration-v3/

此外，react-jss 项目似乎已存档：

https://github.com/cssinjs/react-jss

...但是 JSS 至少达到 10 版：

https://cssinjs.org/?v=v10.0.0-alpha.16

所以我完全不知道如何将 React-JSS 与 MUI 4 一起使用。在 package.json 中导入的不是 "react-jss": "8.6.1", 吗？我应该切换到情感组件还是样式组件？好迷茫。

【参考方案1】：

你可以使用：

"react-jss": "10.0.0-alpha.16"

https://github.com/cssinjs/react-jss 已归档，因为它被重组为 jss monorepo 的一部分（一个 GitHub 存储库中的多个包）：https://github.com/cssinjs/jss/tree/master/packages/react-jss。

每次升级Material-UI时，都要检查Material-UI中的jss版本是否有变化，以便保持同步；否则你将引入两个版本的 jss。您可以在这里查看 Material-UI jss 版本：https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/package.json#L48

您还应该考虑是否需要直接使用 react-jss 与仅使用 Material-UI 中的 jss 包装器（例如withStyles、makeStyles 等）。

【讨论】：

谢谢，瑞恩。在我的代码中有很多地方我在 Material-UI 的上下文之外使用react-jss。从长远来看，也许有一种方法可以让我将所有事情都归结为单一的做事方式，但现在我需要两种方式。

瑞恩，还有一个问题。随着我对 MUIv4 的了解更多，我似乎应该完全放弃 react-jss 并用 @material-ui/styles 替换它。似乎它或多或少是一个替代品，对吧？在这种情况下，我仍然可以使用 JSS 语法，如果我理解正确的话，我可以使用 @material-ui/styles 来设置非 MUI 元素的样式。对吗？

正确。这就是我在回答末尾所指的内容。

是的，我现在明白了。只是花了一点时间让这匹马喝水。 (-;