react-images轮播选中图片未居中问题求助（Next.js+TailwindCSS环境）

react-images v1.2.0-beta版本使用CSS-in-JS生成样式，内置的图片容器默认使用justify-content: flex-start左对齐逻辑，你直接修改动态生成的hash类名（css-xxx）会遇到两个问题：一是类名打包后会变动，二是CSS-in-JS生成的样式优先级高于普通全局样式，导致修改不生效。

方案1：使用组件内置的styles属性覆盖（最推荐，无副作用） #

组件原生支持传入styles参数自定义内置节点样式，直接修改Carousel组件的配置即可：

import React, { useState, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";
import { photos } from "../data/photoData";

export default function PhotoLibrary() {
  const [currentImage, setCurrentImage] = useState(0);
  const [viewerIsOpen, setViewerIsOpen] = useState(false);

  const openLightbox = useCallback((event, { photo, index }) => {
    setCurrentImage(index);
    setViewerIsOpen(true);
  }, []);

  const closeLightbox = () => {
    setCurrentImage(0);
    setViewerIsOpen(false);
  };

  return (
    <div>
      <Gallery photos={photos} onClick={openLightbox} />
      <ModalGateway>
        {viewerIsOpen ? (
          <Modal onClose={closeLightbox}>
            <Carousel
              currentIndex={currentImage}
              views={photos.map((x) => ({
                ...x,
                srcset: x.srcSet,
                caption: x.title,
              }))}
              {/* 新增样式覆盖配置 */}
              styles={{
                view: (baseStyle) => ({
                  ...baseStyle,
                  justifyContent: "center",
                  alignItems: "center",
                }),
              }}
            />
          </Modal>
        ) : null}
      </ModalGateway>
    </div>
  );
}

方案2：全局样式强制覆盖 #

如果不想修改组件代码，可以在Next.js的全局CSS文件（通常是styles/global.css）中添加以下规则，使用!important提升优先级：

/* 用官方固定类名修改，不会随打包变动 */
.react-images__view {
  justify-content: center !important;
  align-items: center !important;
}

如果后续遇到更多适配问题，也可以更换兼容性更好的灯箱组件：

• react-responsive-carousel：配置灵活，支持自定义类名，和Tailwind CSS适配性好
• yet-another-react-lightbox：专门做图片灯箱效果，原生支持居中、缩放、手势操作等常用功能

内容的提问来源于stack exchange，提问作者Mathias Riis Sorensen