react-image-gallery 中的样式标题答案

【问题标题】：styling titles in react-image-galleryreact-image-gallery 中的样式标题
【发布时间】：2021-01-16 19:57:01
【问题描述】：

我正在使用 react-image-gallery 在我的网页上显示幻灯片。我正在从一个看起来像这样的 json 文件中获取数据。

"pastdogs": [
    {
      
      "description": " Buddy, Dog given to the king of England",
      "original": "./puppies/firstday.jpg"
    },

这工作正常，图像和描述都显示出来了。问题是描述在画廊的一侧很尴尬。

我想在图片中间进行描述，最好在顶部。我可以通过在组件周围使用 div 来操作整个画廊

<div className="container-fluid slider">
      <ImageGallery
        className=""
        items={pastdogs}
        showFullscreenButton={false}
        autoplay={true}
      ></ImageGallery>
    </div>

.slider {
  width: 50% !important;
}

这会减小整个画廊的大小，这并不理想。如何仅更改描述元素？感谢您的帮助和专业知识。

【问题讨论】：

标签： javascript css reactjs sass

【解决方案1】：

您可以通过添加流动来调整描述css

.image-gallery-slide .image-gallery-description {
    background: rgba(0, 0, 0, 0.4);
    bottom: 70px;
    color: #fff;
    left: 45%; // you can modify this value to center the text
    line-height: 1;
    padding: 10px 20px;
    position: absolute;
    white-space: normal;
    justify-content: center;
    align-items: center;
}

或者您可以使用自定义 renderItem 并使用您自己的 css 和块

import React, { Component } from 'react';
import ImageGallery from 'react-image-gallery';
import './App.css';
import "react-image-gallery/styles/css/image-gallery.css";

class App extends Component {

  myRenderItem () {
    return <div>
          <img className="image-gallery-image" src="https://picsum.photos/id/1018/1000/600/" title="hello world" />
          <span style={{ left: '45%' }} className="image-gallery-description">hello world</span>
      </div>;
  }
  
  render() {
    const images = [
      {
        original: 'https://picsum.photos/id/1018/1000/600/',
        thumbnail: 'https://picsum.photos/id/1018/250/150/',
        renderItem: this.myRenderItem,
      },
      {
        original: 'https://picsum.photos/id/1015/1000/600/',
        thumbnail: 'https://picsum.photos/id/1015/250/150/',
      },
      {
        original: 'https://picsum.photos/id/1019/1000/600/',
        thumbnail: 'https://picsum.photos/id/1019/250/150/',
      },
    ];

    return (
      <div>
        <ImageGallery items={images} />;
      </div>
    );
  }
}

export default App;

【讨论】：