React中如何移除Ant Design Tabs组件的聚焦边框？

Hey there! That border you're noticing is almost certainly the default focus outline browsers add to interactive elements—it's super common when working with Ant Design's Tabs component. Let's walk through a few simple ways to get rid of it:

1. Override Focus Styles with Custom CSS #

Ant Design's Tabs (both the tab headers and content panels) inherit browser default focus styles. You can target these elements directly to remove the outline:

/* Remove outline from tab headers when focused */
.ant-tabs-tab:focus-visible {
  outline: none !important;
}

/* If the border is appearing around the content panel, target this too */
.ant-tabs-content-holder:focus-visible {
  outline: none !important;
}

Pro tip: Using focus-visible instead of just focus keeps your app accessible—keyboard users will still see a focus indicator when navigating via tab, but mouse clicks won't trigger that annoying border.

2. Use CSS-in-JS for Component-Style Overrides #

If you're using a CSS-in-JS library like styled-components, wrap the Ant Design Tabs component to encapsulate the style fix:

import styled from 'styled-components';
import { Tabs } from 'antd';

const StyledTabs = styled(Tabs)`
  .ant-tabs-tab:focus-visible {
    outline: none;
  }
`;

// Use the wrapped component in your app
function MyTabbedComponent() {
  return (
    <StyledTabs defaultActiveKey="1">
      <Tabs.TabPane tab="First Tab" key="1">My content here</Tabs.TabPane>
      <Tabs.TabPane tab="Second Tab" key="2">More content</Tabs.TabPane>
    </StyledTabs>
  );
}

3. Check Your Custom Styles First #

Before diving into overriding Ant Design's styles, double-check your own CSS. Sometimes the border comes from a custom :active or :focus style you've added accidentally. Use your browser's dev tools (right-click → Inspect) to highlight the element when it's clicked—look for styles like border, outline, or box-shadow that trigger on interaction. Once you spot the culprit, adjust your custom styles to remove it.

A Quick Accessibility Reminder #

While removing the outline cleans up your UI, don't ignore accessibility! If you do remove the default focus outline, consider adding a custom, visible focus style (like a subtle box-shadow or background color shift) for keyboard users. This ensures everyone can navigate your app easily.

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