React中如何使用Ant Design的ConfigProvider自定义元素聚焦轮廓样式？

开发者阿泽

2026-4-30

解决Ant Design输入框焦点轮廓自定义为绿色的问题

嘿，我刚好折腾过这个配置，给你分享下具体怎么实现～

你已经用ConfigProvider包裹了整个应用，接下来只需要通过它的theme属性来配置自定义样式就可以了，有两种方式可选，看你是想全局统一修改还是只针对输入框单独调整：

方式一：全局修改所有组件的焦点颜色

如果希望所有Ant Design组件（比如输入框、按钮、下拉选择器等）的焦点轮廓都变成绿色，可以直接在token里配置colorFocus：

import { ConfigProvider, Input } from 'antd';

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorFocus: '#52c41a', // 这里替换成你想要的绿色色值
        },
      }}
    >
      <Input placeholder="点击输入框试试焦点效果" />
      {/* 其他组件比如Button、Select等的焦点也会变成绿色 */}
    </ConfigProvider>
  );
}

export default App;

方式二：仅针对Input组件修改焦点样式

如果只想让输入框的焦点变绿色，其他组件保持默认，就用components属性单独配置Input的样式：

import { ConfigProvider, Input } from 'antd';

function App() {
  return (
    <ConfigProvider
      theme={{
        components: {
          Input: {
            // 自定义焦点时的阴影环（和Ant Design默认风格一致的方式）
            focusShadow: '0 0 0 2px rgba(82, 196, 26, 0.2)',
            // 或者直接用outline样式覆盖
            css: {
              '&.ant-input:focus': {
                outline: '2px solid #52c41a',
                outlineOffset: '2px',
              },
            },
          },
        },
      }}
    >
      <Input placeholder="点击输入框查看绿色焦点" />
    </ConfigProvider>
  );
}

export default App;