React TS中Styled-Components实现Houdini渐变Hover效果失效求助

问题分析 #

你的代码存在几个关键问题导致hover效果失效：

• 缺少**hover状态下修改自定义属性--gradPoint**的规则，没有触发过渡的条件
• @supports检测的paint(houdini)逻辑错误，原示例依赖的是CSS Houdini的@property特性，而非paint API
• 针对不支持Houdini的浏览器，.post:hover选择器无效，组件内不存在该类名
• @property定义中的转义字符<percentage>属于冗余写法，直接使用<percentage>即可

修正后的代码 #

import React from "react";
import styled from "styled-components";

const Houdini = styled.div`
  --color1: pink;
  --color2: orange;
  --gradPoint: 40%;

  /* 正确定义可过渡的自定义属性 */
  @supports (background: linear-gradient(var(--gradPoint))) {
    @property --gradPoint {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 40%;
    }
  }

  font-family: "Amiri";
  width: 380px;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  background: pink; /* 降级背景色 */
  background: linear-gradient(
    var(--color1) var(--gradPoint),
    var(--color2) calc(var(--gradPoint) + 20%)
  );
  transition: --gradPoint 0.5s, filter 0.8s;
  cursor: pointer;

  /* 新增hover触发过渡的规则 */
  &:hover,
  &:focus {
    --gradPoint: 80%;
  }

  /* 不支持Houdini的浏览器降级处理 */
  @supports not ((background: linear-gradient(var(--gradPoint))) and (@property --gradPoint)) {
    &:hover,
    &:focus {
      filter: hue-rotate(-90deg);
    }
  }
`;

function App() {
  return (
    <>
      <Houdini>
        <h2>This Demo Requires Chrome 85+</h2>
        <p>
          Browsers which support CSS Houdini will see a gradient with a gradient
          stop transition on hover. Unsupported browsers will see a gradient
          background with a hue rotation on hover.
        </p>
      </Houdini>
    </>
  );
}

export default App;

关键修改说明 #

• 新增&:hover, &:focus规则，通过修改--gradPoint的值触发渐变过渡
• 修正@supports检测逻辑，确保只在支持可过渡自定义属性的浏览器中启用Houdini效果
• 替换无效的.post选择器为组件自身的&选择器，保证降级逻辑生效
• 移除@property中的冗余转义字符，保证语法符合规范
• 新增flex-direction: column优化内容排版，添加cursor: pointer提示可交互

内容的提问来源于stack exchange，提问作者user18943198