如何替换react-grid-layout中的可调整大小手柄图标？

有两种常用方法可以替换默认的调整大小图标，按需选择即可：

方法1：用CSS直接覆盖样式 #

react-grid-layout的默认调整手柄对应CSS类.react-resizable-handle，直接通过CSS替换默认图标：

/* 隐藏默认的三角形图标 */
.react-resizable-handle::after {
  content: none;
}

/* 设置自定义图标作为背景 */
.react-resizable-handle {
  background-image: url('你的自定义图标路径');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  /* 可根据需求调整手柄尺寸 */
  width: 22px;
  height: 22px;
}

如果用SVG图标，也可以把SVG代码转义后写在content里，或者直接用内联SVG实现。

方法2：自定义ResizeHandle组件 #

如果需要更灵活的交互或复杂图标，直接传入自定义手柄组件：

import React from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(Responsive);

// 自定义调整手柄组件
const CustomResizeHandle = () => (
  <div className="custom-resize-handle">
    {/* 这里放你的自定义图标，比如SVG或第三方图标库组件 */}
    <svg width="16" height="16" viewBox="0 0 24 24" fill="#666">
      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
    </svg>
  </div>
);

// 在布局中使用自定义手柄
const Dashboard = () => {
  const layout = [
    { i: '1', x: 0, y: 0, w: 2, h: 2 },
    { i: '2', x: 2, y: 0, w: 2, h: 2 },
  ];

  return (
    <ResponsiveGridLayout
      className="layout"
      layouts={{ lg: layout }}
      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
      cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
      // 传入自定义手柄
      resizeHandle={<CustomResizeHandle />}
    >
      <div key="1">网格项1</div>
      <div key="2">网格项2</div>
    </ResponsiveGridLayout>
  );
};

export default Dashboard;

再给自定义手柄加基础样式：

.custom-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  cursor: se-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

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