javascript - ReactJS 和 Material UI makeStyles/useStyles 问题

Question

我正在开发一个小型网络应用程序，我正在使用 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 函数或覆盖全局主题以减少整体代码量。