Как стилизовать каждый эскиз в компоненте response-grid-gallery - PullRequest
Новая
       25

Как стилизовать каждый эскиз в компоненте response-grid-gallery

0 голосов
/ 07 мая 2019

Я пытаюсь добавить стили для каждой из миниатюр, я читаю документацию и думаю, что я должен был использовать атрибут "tumbnailStyle" - но я понятия не имею, как мне добавить className и к какому свойству?

Я просмотрел свойства объекта "this", но не увидел ничего, к чему я мог бы присоединить свой класс. 

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;

1 Ответ

1 голос
/ 07 мая 2019

thumbnailStyle - это функция, которая должна быть передана (не выполнена) и при ее вызове вернет объект со свойствами css, который будет применен через атрибут style, а не имя класса.

Так что-то вроде 

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

где styleSmall похоже на 

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