CSS模块参考jsx中的关键帧名称

Question

我在css-loader中使用css模块，但偶然发现了一个问题。 我有一个LoadingOverlay组件，其中显示了持续时间ms的加载程序。 我在叠加层上应用了淡入淡出动画，并在组件内部添加了以下代码：

if (show) {
   return {
       animation: `fade-out-long ${duration}ms ease-out forwards`
   };
}

此样式对象将应用于叠加节点。 我这样做是因为持续时间是从父组件传递的prop。 我的问题是LoadingOverlay.scss是一个scss模块，它使用@include来包含如下动画：

@import '../../../constants/animations';

@include fade-out-long-keyframes();
@include fade-out-long2-keyframes();

动画名称也被编译为LoadingOverlay-module__fade-out-long之类的东西。

然后如何从jsx引用正确的动画名称？

Answer 1

我认为您在关键帧上错过了:global。您必须使用如下所示的：global来编写关键帧

@keyframes :global(slideInFromRight) {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}