Accepted answer

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 => ? "red": "blue"};
transition: background-color 2s linear;

function app() {
  const [red, setred] = react.usestate(false);
  function handleclick() {

  return (
    <div classname="app">
      <styledsquare red={red}>styled component</styledsquare>
      <button onclick={handleclick}>click</button>

const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);

Related Query

More Query from same tag