reactjs - 反应情感CSS - 模板文字返回函数不是值

Question

我一直试图让这个逻辑与反应情绪一起工作，使用传递给这个组件的道具来呈现我的 CSS。但是动画 CSS 属性被忽略了——我认为这是因为我这样做的方式意味着为动画属性字符串返回函数，而不是值。

谁能帮我为此做正确的语法？

import React from "react";
import { css } from "emotion";

const strike = keyframes`
  from{
    transform: scaleX(0)
  }
  to{
    transform : scaleX(1)
  }
`;

const todoStyle = css`
cursor: pointer;
  color: red;
  position: relative;
  display: inline-block;
  /* width: 200px; */
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    top: 50%;
    background: black;
    position: absolute;
    transform-origin: 0 50%;
    animation: ${strike} 0.3s ${props => (props.todo.complete === false ? " normal" : " reverse")};
  }
`;

// everything works except the animation property above is ignored

export default props => (
  <div className={todoStyle} onClick={props.toggleComplete}>
    {props.todo.text}
  </div>
);

Answer 1

当您调用animation: ${strike} 0.3s ${props => ...}时todoStyle，情感将不知道道具是什么——我很惊讶没有任何东西会引发错误。

您可以尝试在组件内移动 props 函数：

  export default props => (
-   <div className={todoStyle} onClick={props.toggleComplete}>

+   <div className={css`
+     ${todoStyle}
+     animation: ${strike} 0.3s ${props => (!props.todo.complete ? "normal" : "reverse")};
+     `} onClick={props.toggleComplete}>

      {props.todo.text}
    </div>
  );