有没有办法将变量从 ReactJS 传递到 CSS 样式表？

Posted 2023-02-22

【中文标题】有没有办法将变量从 ReactJS 传递到 CSS 样式表？

【英文标题】：Is there any way to pass a variable from ReactJS to a CSS stylesheet?

【发布时间】：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% 你想做什么，只能猜测。

【参考方案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>

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

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

希望对您有所帮助！ :)

【参考方案2】：

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