React中Fancybox缩略图及相关元素样式自定义方法咨询

一、通过Thumbs配置选项快速调整基础样式 #

Fancybox的Thumbs配置项本身提供了不少可直接调整的参数，能快速修改缩略图的尺寸、间距、位置等基础样式，直接在你的现有配置上扩展即可：

<Fancybox
  options={{
    Carousel: {
      infinite: true,
    },
    Toolbar: {
      display: {
        left: ["infobar"],
        middle: [],
        right: ["zoomIn", "zoomOut", "close"],
      },
    },
    Thumbs: {
      type: "classic",
      width: 80,    // 自定义缩略图宽度
      height: 60,   // 自定义缩略图高度
      gap: 10,      // 缩略图之间的间距
      position: "bottom", // 缩略图栏位置：top/bottom/left/right
      autoStart: true, // 打开弹窗时自动显示缩略图
    },
  }}
>
  <div className="">
    <IMG src={placeholder} alt="placeholder" />
    <IMG src={placeholder} alt="placeholder" />
    <IMG src={placeholder} alt="placeholder" />
  </div>
</Fancybox>

二、自定义CSS覆盖默认样式 #

如果需要更细致的样式定制（比如选中状态、hover效果、背景色等），可以通过Fancybox暴露的CSS类名来覆盖默认样式：

/* 缩略图栏整体背景与内边距 */
.fancybox-thumbs {
  background-color: #1a1a1a;
  padding: 12px 0;
}

/* 单个缩略图容器的圆角与溢出控制 */
.fancybox-thumbs__item {
  border-radius: 8px;
  overflow: hidden;
}

/* 选中状态的缩略图边框样式 */
.fancybox-thumbs__button.is-selected {
  border: 2px solid #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* 缩略图hover时的缩放与透明度变化 */
.fancybox-thumbs__button:hover {
  opacity: 0.8;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

如果你的项目使用CSS Modules，需要用:global()包裹类名来突破模块化限制：

:global(.fancybox-thumbs) {
  background-color: #f5f5f5;
}

三、自定义缩略图HTML模板（进阶） #

如果默认的缩略图结构满足不了需求，可以通过Templates配置项完全自定义缩略图的HTML结构：

<Fancybox
  options={{
    // 其他配置...
    Templates: {
      // 自定义缩略图模板，item参数包含当前图片的各类属性
      thumb: (item) => `
        <div class="custom-thumb-container">
          <img src="${item.thumbSrc}" alt="${item.alt}" class="custom-thumb-img" />
          <span class="thumb-index">${item.index + 1}</span>
        </div>
      `,
    },
    Thumbs: {
      type: "classic",
    },
  }}
>
  {/* 图片内容 */}
</Fancybox>

然后搭配自定义CSS：

.custom-thumb-container {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.custom-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-index {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

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