[Solved]-How to make a styled component work with css transition?-Reactjs

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);