Question

该应用包含2个蓝色方块和一个按钮。

第一个正方形是html div，第二个正方形是样式化的组件div。单击按钮后，它们应在2s过渡期间在蓝色和红色之间切换。但是，只有带有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

它不起作用，因为您在App函数中拥有样式化的组件。每次重新渲染都会被再次声明，因此过渡不会发生。只需将样式化的组件移到功能之外即可对其进行修复。我在这里将道具传递给样式组件以更改颜色。

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

如何使样式化的组件与CSS过渡一起使用？

1 个答案: