【问题标题】：Is there any way to pass a variable from ReactJS to a CSS stylesheet?有没有办法将变量从 ReactJS 传递到 CSS 样式表？
【发布时间】：2017-05-01 14:14:55
【问题描述】：

我正在编写一个包含可变数量组件的滚动代码，因此我需要它来更改translate3d 根据组件数量移动它的距离。我能想到的唯一方法是以某种方式从JSX 文件中传递一个数字，但我找不到这样做的方法。有什么方法可以将CSS 传递给变量，或者其他方式来做我想做的事情？

【问题讨论】：

您可以使用 javascript 手动添加 translate3d 的内联样式以及所需的适当变量。这可能会有所帮助：facebook.github.io/react/docs/dom-elements.html#style
CSS 没有变量。您必须使用文档树中元素的属性。
@Press 我一直在尝试这样做，但关键帧的东西似乎在内联样式中不起作用。
试图按照那里的示例至少引用动画，它抱怨-webkit-animation:前面的-
@SaintWacko 你不能内联做关键帧/创建/编辑动画。您需要想出一种方法来通过内联样式（至少 afaik）来完成所有这些工作，或者应用一个引用您的变量的类。所以class="translate3d var30" 可能类似于transform: translate3d(-30px, 0, 0); 或者你正在做的任何事情。这不是一个好的解决方案，但如果不知道 100% 你想做什么，只能猜测。

标签： javascript css reactjs css-animations keyframe

【解决方案1】：

有几个« CSS in JS » 库允许您将keyframes 添加到组件动画中。当您在 JavaScript 中编写样式时，您可以直接使用组件的 props/states 或其他一些常量来创建组件样式。

以下 3 个库支持关键帧（我个人一直在使用第一个）：

样式化组件 (GitHub)

import styled, { keyframes } from 'styled-components';

const rotate360 = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate360} 2s linear infinite;
`;

魅力 (GitHub)

import { css } from 'glamor'

let bounce = css.keyframes('bounce', {
  '0%': { transform: 'scale(0.1)', opacity: 0 },
  '60%': { transform: 'scale(1.2)', opacity: 1 },
  '100%': { transform: 'scale(1)' }
})

<div {...css({
  animation: `${bounce} 2s`,
  width: 50, height: 50,
  backgroundColor: 'red'
})}>
  bounce!
</div>

阿芙罗狄蒂 (GitHub)

const translateKeyframes = {
  '0%': { transform: 'translateX(0)' },
  '50%': { transform: 'translateX(100px)' },
  '100%': { transform: 'translateX(0)' },
};

const opacityKeyframes = {
  'from': { opacity: 0 },
  'to': { opacity: 1 }
};

const styles = StyleSheet.create({
  zippyHeader: {
    animationName: [translateKeyframes, opacityKeyframes],
    animationDuration: '3s, 1200ms',
    animationIterationCount: 'infinite',
  },
});

<div className={css(styles.zippyHeader)}>...</div>

样式化组件 (GitHub)

魅力 (GitHub)

阿芙罗狄蒂 (GitHub)

更多关于 « CSS in JS » 模式的阅读