如何在自定义组件中复用Antd v5主题样式过渡效果？

核心思路 #

Antd的输入框过渡效果依赖内置CSS过渡类和主题令牌中的过渡参数，你可以通过以下两种方式实现：

1. 直接复用Antd的全局过渡类 #

Antd为输入框预设了统一的过渡样式类，直接在自定义组件根元素上添加即可：

• 基础过渡类：ant-input（包含边框、背景色等核心过渡逻辑）
• 聚焦状态类：组件获得焦点时手动添加ant-input-focused

示例代码（Preact）：

import { useState } from 'preact/hooks';

const CustomContentEditable = () => {
  const [isFocused, setIsFocused] = useState(false);

  return (
    <div
      contentEditable
      className={`ant-input ${isFocused ? 'ant-input-focused' : ''}`}
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)}
      style={{ minHeight: '32px', padding: '4px 11px' }}
    />
  );
};

2. 基于主题令牌自定义过渡样式 #

如果需要更灵活的控制，可利用Antd主题令牌中的过渡参数（如transitionDuration、transitionTimingFunction）编写自定义CSS：

首先通过useToken获取主题令牌（需确保项目安装@ant-design/cssinjs）：

import { useState } from 'preact/hooks';
import { useToken } from '@ant-design/cssinjs';

const CustomContentEditable = () => {
  const { token } = useToken();
  const [isFocused, setIsFocused] = useState(false);

  return (
    <div
      contentEditable
      style={{
        border: `1px solid ${token.colorBorder}`,
        borderRadius: token.borderRadius,
        padding: '4px 11px',
        minHeight: '32px',
        transition: `all ${token.transitionDuration} ${token.transitionTimingFunction}`,
        outline: 'none',
        ...(isFocused && {
          borderColor: token.colorPrimary,
          boxShadow: token.boxShadowPrimary
        })
      }}
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)}
    />
  );
};

注意事项 #

• Preact环境下需正确配置@ant-design/cssinjs的Provider，确保主题令牌能正常获取
• 使用类名复用方式时，避免覆盖Antd原有类的样式，必要时通过CSS优先级调整

内容的提问来源于stack exchange，提问作者Владимир Ситник