Что заставляет переход не работать в React. js?

Question

я написал CSS. Это отлично работает для размытия.

document.addEventListener("click", () => {
  document.querySelector(".transition").classList.toggle("blur");
})

.transition {
  transition: 5s;
  filter: blur(0px);
}

.blur {
  filter: blur(5px);
}

<div class="transition">
  TEXT
</div>

Однако это не будет работать с React. js и Styled Components. Я хочу реализовать переход по фильтру без использования надстройки. Почему это не работает и как это работает?

• CodeSandBox Demo

const Button = styled.button``;
let ToggleBlurText = styled.div`
  transition: "5s"
`;

function App() {
  const [blur, setBlur] = useState(false);
  useEffect(() => {
    ToggleBlurText = styled.div`
      filter: blur(${blur ? "0px" : "5px"});
      transition: "5s"
    `;
  }, [blur]);

  return (
    <div className="App">
      <ToggleBlurText>
        <h2>TEXT</h2>
      </ToggleBlurText>
      <Button onClick={() => setBlur(!blur)}>button</Button>
    </div>
  );
}

Answer 1

Такой подход не будет работать. React, вероятно, не будет повторно визуализировать компонент ToggleBlurText, и стили внутри эффекта не будут применены.

Вместо этого вы можете создать стилизованный компонент и переключить класс css, который изменяет размытие в зависимости от в вашем состоянии.

const Button = styled.button``;
const ToggleBlurText = styled.div`
  transition: 5s;
  filter: blur(0px);

  &.blur {
    filter: blur(5px);
  }
`;

function App() {
  const [blur, setBlur] = useState(false);

  return (
    <div className="App">
      <ToggleBlurText className={blur ? 'blur' : ''}>
        <h2>TEXT</h2>
      </ToggleBlurText>
      <Button onClick={() => setBlur(prev => !prev)}>button</Button>
    </div>
  );
}

Я также исправил опечатку в вашем стилизованном компоненте css, а также немного изменил обработчик onClick.