ReactJS 和 Material UI makeStyles/useStyles 问题

Question

我正在开发一个小型 Web 应用程序，我正在使用 ReactJS 和 Material UI 开发它。在文档中提供的示例中，许多组件似乎在代码中都有 useStyles。我按照示例进行操作，现在我基本上在每个组件中都有一个 useStyles 函数。我的问题是：这是好的做法吗？ 通常我有一个包含所有类的单独 CSS 文件，坦率地说，我发现它更易于管理，但对于这种情况，我想遵循 CSS-in-JS 模式。

您可以在此处查看我正在处理的代码示例：https://github.com/sickdyd/foriio/blob/master/src/components/body/UserProfile.js

感谢您提供的任何澄清。

Answer 1

是的，这是个好习惯。

它允许您分离您的关注点并在需要的地方本地化您的样式。在处理其他类时，您不会意外覆盖样式。这将有助于您尤其是大型项目。

它还允许代码拆分，只有需要和实际使用的 CSS/CSS-in-JS 才会被下载并添加到您的网站。这也将缩短您的初始绘制时间，因为需要解析的 CSS 更少。

您觉得您在多个位置重复您的代码，您也可以共享 useStyles 函数或覆盖全局主题以减少整体代码量。