如何在 react-grid-gallery 组件中设置每个缩略图的样式

Question

我正在尝试为每个缩略图添加样式，我一直在阅读文档并且我想我应该使用 "tumbnailStyle" 属性 - 但我不知道我应该如何添加 class名称和属性?

我查看了 "this" 对象的属性，但没有看到任何可以附加我的 class 的东西。

import React, { Component } from "react";
import Gallery from "react-grid-gallery";
import "./wings.css";

let IMAGES = [];

class wings extends Component {
  state = {
    files: [
      "a",
      "b",
      "c"
    ]
  };
  addToImages(files) {
    for (let i = 0; i < files.length; i++) {
      IMAGES = [
        ...IMAGES,
        {
          src: process.env.PUBLIC_URL + "/gfx/" + files[i] + ".jpg",
          thumbnail:
            process.env.PUBLIC_URL + "/gfx/" + files[i] + ".jpg",
          tags: [
          ],
          caption: ""
        }
      ];
    }
  }
  constructor() {
    super();
    this.addToImages(this.state.files);
  }
  styleSmall(param) {
    console.log(param); //how to style 


  }

  render() {
    return (
      <div className="container gallery-wrapper">
        <Gallery
          images={IMAGES}
          enableImageSelection={false}
          thumbnailStyle={this.styleSmall(this)}
        />
      </div>
    );
  }
}

export default wings;

Answer 1

thumbnailStyle 是一个必须传递（不执行）的函数，调用时将 return 具有 css 属性的对象通过 style 属性应用，不是 class 名字。

所以像

<Gallery
      images={IMAGES}
      enableImageSelection={false}
      thumbnailStyle={this.styleSmall}
    />

其中 styleSmall 类似于

styleSmall(){
   return ({
      border:'5px solid red'
   });
}

如何在 react-grid-gallery 组件中设置每个缩略图的样式

How to style each thumbnail in react-grid-gallery component

image-gallery

reactjs