React + Recharts 图表点击时出现黑色边框的问题及解决方法

问题原因

黑色边框是浏览器默认的焦点样式（outline），用于可访问性。

解决方法

方法1：使用 CSS 移除焦点样式（推荐）

/* 全局移除所有 recharts 元素的焦点样式 */
.recharts-wrapper:focus,
.recharts-surface:focus,
.recharts-layer:focus {
  outline: none !important;
}

/* 或者更具体的选择器 */
.recharts-wrapper *:focus {
  outline: none !important;
}

方法2：使用 style 属性内联样式

<LineChart 
  width={500} 
  height={300} 
  data={data}
  style={{ outline: 'none' }}
  onMouseDown={(e) => e.preventDefault()}
>
  {/* 图表内容 */}
</LineChart>

方法3：使用 className 自定义样式

// 添加自定义 CSS 类
<LineChart 
  width={500} 
  height={300} 
  data={data}
  className="custom-chart"
>
  {/* 图表内容 */}
</LineChart>

/* CSS 文件 */
.custom-chart:focus {
  outline: none;
  box-shadow: none;
}

/* 针对图表内部元素 */
.custom-chart .recharts-surface:focus {
  outline: none;
}

方法4：使用 styled-components 或 Emotion

import styled from 'styled-components';

const StyledChart = styled.div`
  .recharts-wrapper:focus,
  .recharts-surface:focus {
    outline: none !important;
  }

  /* 或者自定义焦点样式 */
  .recharts-wrapper:focus {
    outline: 2px solid #4CAF50 !important;
    outline-offset: 2px;
  }
`;

function MyChart() {
  return (
    <StyledChart>
      <LineChart width={500} height={300} data={data}>
        {/* 图表内容 */}
      </LineChart>
    </StyledChart>
  );
}

方法5：JavaScript 事件处理

import { useRef, useEffect } from 'react';

function MyChart() {
  const chartRef = useRef(null);

  useEffect(() => {
    // 移除所有 recharts 元素的 outline 样式
    const elements = chartRef.current?.querySelectorAll('.recharts-wrapper, .recharts-surface');
    elements?.forEach(el => {
      el.style.outline = 'none';
    });
  }, []);

  return (
    <div ref={chartRef}>
      <LineChart width={500} height={300} data={data}>
        {/* 图表内容 */}
      </LineChart>
    </div>
  );
}

方法6：使用 focus-visible 伪类（现代浏览器）

/* 只在键盘操作时显示焦点样式，鼠标点击时不显示 */
.recharts-wrapper:focus:not(:focus-visible) {
  outline: none;
}

.recharts-wrapper:focus-visible {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
}

完整示例

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
import './Chart.css'; // 引入自定义样式

function MyChart() {
  const data = [
    { name: 'Jan', value: 400 },
    { name: 'Feb', value: 300 },
    { name: 'Mar', value: 200 },
    // ... 更多数据
  ];

  return (
    <div className="chart-container">
      <LineChart
        width={600}
        height={300}
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        style={{ outline: 'none' }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </div>
  );
}

export default MyChart;

/* Chart.css */
.chart-container .recharts-wrapper:focus {
  outline: none !important;
}

/* 或者保留可访问性但美化样式 */
.chart-container .recharts-wrapper:focus {
  outline: 2px solid #4CAF50 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

注意事项

推荐的最佳实践

/* 保留可访问性同时美观 */
.recharts-wrapper:focus-visible {
  outline: 2px solid #2196F3 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* 鼠标点击时不显示焦点 */
.recharts-wrapper:focus:not(:focus-visible) {
  outline: none !important;
}

选择适合你项目需求的方法，平衡美观性和可访问性。