这如何转换为 JSS？

【问题标题】：How does this convert into JSS?这如何转换为 JSS？
【发布时间】：2021-10-16 02:09:39
【问题描述】：

我是 JSS 新手，想知道下面的 CSS 是如何转换为 JSS 的

.spinnerContainer {

  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  @keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  @-webkit-keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }

}

【问题讨论】：

JSS 是什么意思？ JS？ JSX？
JSS 在允许您将 CSS 写入 JavaScript 的库中。

标签： javascript css jss

【解决方案1】：

我想我找到了答案：他们没有与@-webkit-keyframes 等效的版本，因为他们已经在animation 的每个版本中编译了它。意思是：

export const spinnerStyles = createUseStyles({
  spinnerContainer: {
    // other styles
    animation: '$spin 1s ease-in-out infinite',
  },
  '@keyframes spin': {
    to: {
      '-webkit-transform': 'rotate(360deg)'
    }
  }
});

编译成

.spinnerStyles {
  animation: spin 1s ease-in-out infinite;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

或者如果你像我一样使用 Mozilla：

.spinnerStyles {
  animation: spin 1s ease-in-out infinite;
}

@-moz-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

【讨论】：