Как заставить стилизованный компонент работать с переходом CSS?

Question

Приложение состоит из 2 синих квадратов и кнопки.

Первый квадрат - это HTML-формат, а второй - стилизованный компонент. Они должны переключаться между синим и красным цветом во время перехода 2 с после нажатия кнопки. Однако только квадрат с html div учитывает длительность перехода. Стилизованный компонент меняет цвет сразу.

Можно ли заставить его работать так, чтобы стилизованный компонент учитывал длительность перехода?

Вот пример кода и коробки: https://codesandbox.io/s/styled-component-transition-jcnom

function App() {
  const [red, setRed] = React.useState(false);
  function handleClick() {
    setRed(v => !v);
  }
  const styledCss =
    red &&
    css`
      background-color: red;
      transition: background-color 2s linear;
    `;
  const StyledSquare = styled.div`
    color: white;
    margin: 10px;
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 2s linear;
    ${styledCss};
  `;
  const classes = red ? "red sq" : "sq";

  return (
    <div className="App">
      <div className={classes}>html div</div>
      <StyledSquare>styled component</StyledSquare>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

Answer 1

Это не работает, потому что у вас есть стилизованный компонент в функции приложения. Каждое повторное объявление объявляется снова, поэтому переход не может произойти. Просто переместите стилизованные компоненты за пределы функции, чтобы исправить это. Здесь я передаю реквизиты стилизованному компоненту, чтобы изменить цвет.

import React from "react";
import ReactDOM from "react-dom";
import styled, { css } from "styled-components";

import "./styles.css";

const StyledSquare = styled.div`
color: white;
margin: 10px;
width: 100px;
height: 100px;
background-color: ${props => props.red ? "red": "blue"};
transition: background-color 2s linear;
`;

function App() {
  const [red, setRed] = React.useState(false);
  function handleClick() {
    setRed(!red);
  }

  return (
    <div className="App">
      <StyledSquare red={red}>styled component</StyledSquare>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);