How to make a styled component work with css transition? - reactjs

Question

The app consists of 2 blue squares and a button.
First square is a html div and the second square is a styled component div. They should toggle between blue and red color during 2s transition after clicking the button. However, only the square with html div respects transition duration. The styled component changes color at once.
Is it possible to make it work so that the styled component respects the transition duration?
Here is the codesandbox example: 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

It's not working because you have your styled component in App function. Every rerender it's being declared again, so transition can't happen. Simply move styled components outside function to fix it. I'm passing props here to styled component to change color.
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);