为什么使用 useStyles MaterialUI 函数而不是 CSS？
Why use useStyles MaterialUI function instead of CSS?
我正在使用 Material UI 组件或内联属性制作 MERN 应用程序。但是为什么要创建一个 js 文件，我必须在其中导入 makeStyles 函数，它基本上 returns 一个带有 CSS 的对象。然后相应地将它分配给我的不同元素的类名。
什么时候可以做一个CSS文件，然后直接在里面写CSS。
使用 CSS in JS 或类似的东西的好处之一，就像您使用 Material UI 编写 CSS 的方式一样，您可以使 CSS 属性 动态。这意味着 CSS 属性 可以适应您 App 上的任何动态数据。
假设您正在为某些卡片创建 fade-in 弹出效果，并且您希望它以下列方式发生：
- 从头到尾，所有的牌出现的时间总是1秒。
- 每张牌的时间都相同fade-in。
- 在前一张卡片完成它的fade-in动画后，下一张卡片将开始fade-in动画（这意味着后一张卡片应该有卡片动画持续时间的动画延迟）。
如果你总共有两张卡，也许你可以简单地写CSS aniamtion-duration 0.5s，第二张卡0.5 animation-delay
但是如果你不知道卡片的总数怎么办？这就是我们所说的动态数据。我们无法制作静态 CSS 属性 来完成这样的动画。单独使用 CSS 并且没有 HTML 和 JS 的帮助，没有办法做到这一点。使用 JS，我们可以访问变量和动态数据，这些数据也可以应用于 CSS，因此我们可以将它们放入 CSS.
CSS 在 JS 中不是唯一的方法，而是一个有效的工具，这就是为什么有很多包可以使用它，例如 Styled Component & Emotion。更不用说，JS 中的 CSS 还有很多其他的好处，比如可以让你的 CSS 可重用（它会在变成实际的 CSS 之前被当作一个对象对待），希望这个可以帮到你
我正在使用 Material UI 组件或内联属性制作 MERN 应用程序。但是为什么要创建一个 js 文件，我必须在其中导入 makeStyles 函数，它基本上 returns 一个带有 CSS 的对象。然后相应地将它分配给我的不同元素的类名。 什么时候可以做一个CSS文件，然后直接在里面写CSS。
使用 CSS in JS 或类似的东西的好处之一，就像您使用 Material UI 编写 CSS 的方式一样，您可以使 CSS 属性 动态。这意味着 CSS 属性 可以适应您 App 上的任何动态数据。
假设您正在为某些卡片创建 fade-in 弹出效果，并且您希望它以下列方式发生：
- 从头到尾，所有的牌出现的时间总是1秒。
- 每张牌的时间都相同fade-in。
- 在前一张卡片完成它的fade-in动画后，下一张卡片将开始fade-in动画（这意味着后一张卡片应该有卡片动画持续时间的动画延迟）。
如果你总共有两张卡，也许你可以简单地写CSS aniamtion-duration 0.5s，第二张卡0.5 animation-delay
但是如果你不知道卡片的总数怎么办？这就是我们所说的动态数据。我们无法制作静态 CSS 属性 来完成这样的动画。单独使用 CSS 并且没有 HTML 和 JS 的帮助，没有办法做到这一点。使用 JS，我们可以访问变量和动态数据，这些数据也可以应用于 CSS，因此我们可以将它们放入 CSS.
CSS 在 JS 中不是唯一的方法，而是一个有效的工具，这就是为什么有很多包可以使用它，例如 Styled Component & Emotion。更不用说，JS 中的 CSS 还有很多其他的好处，比如可以让你的 CSS 可重用（它会在变成实际的 CSS 之前被当作一个对象对待），希望这个可以帮到你