Реагировать на эмоции CSS - шаблонная функция, возвращающая литерал, не является значением

Я пытался заставить эту логику работать с эмоциями реакции, используя опору, переданную этому компоненту, для рендеринга моего 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>
);


reactjs jsx emotion ecmascript-6
person spacewindow    schedule 01.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы вызываете 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>
  );
person Derek Nguyen    schedule 14.01.2019