有什么方法可以将变量从 ReactJS 传递到 CSS 样式表吗？

Question

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

Answer 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>

更多阅读 JS 中的 « CSS » 模式

React: CSS in JS (presentation by Christopher Chedeau, Facebook)（2014 年 11 月 8 日）
Writing your styles in JS ≠ writing inline styles（2016 年 11 月 25 日）

希望对您有所帮助！ :)

Answer 2

虽然不完全是我最初希望的，但我确实找到了一种方法来实现它。原来 translate3d(100%, 0, 0) 不工作的原因是因为 flexbox。从元素中删除后，我可以通过在 React 中动态创建这些样式来设置元素宽度和动画时间来控制动画速度。

有什么方法可以将变量从 ReactJS 传递到 CSS 样式表吗？

Is there any way to pass a variable from ReactJS to a CSS stylesheet?

javascript

css

keyframe

css-animations

reactjs

样式组件 (GitHub)

魅力 (GitHub)

阿佛洛狄忒 (GitHub)

更多阅读 JS 中的 « CSS » 模式