score:0

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

Related Query

More Query from same tag