react-image-gallery 不应用样式

Posted 2023-02-22

【中文标题】react-image-gallery 不应用样式

【英文标题】：react-image-gallery doesn't apply styles

【发布时间】：2021-06-18 02:49:07

【问题描述】：

我想使用 react-image 库创建缩略图轮播，但它没有应用包中的样式，我按照文档中的说明做了所有事情。

# SCSS
 @import "~react-image-gallery/styles/scss/image-gallery.scss";

 # CSS
 @import "~react-image-gallery/styles/css/image-gallery.css";

我将这两个都放在我的 css/scss 文件中，但没有。我还更改了路径，以便它们准确指向 node_modules 包文件夹，例如“../../node_modules/react-image-gallery/styles/css/image-gallery.css”，但仍然没有工作。

知道我做错了什么吗？

【参考方案1】：

如果您对现在的解决方案感兴趣，请查看我的问题我找到了解决方案

import React from 'react'
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from 'react-image-gallery';
import ImgGallery from "./Styled.js"
export  function ShopDetails() 


    const images = [
        
          original: 'https://picsum.photos/id/1018/1000/600/',
          thumbnail: 'https://picsum.photos/id/1018/250/150/',
        ,
        
          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 (
      
         
        <ImgGallery>
          <ImageGallery thumbnailPosition="left" useBrowserFullscreen=false showPlayButton=false autoPlay=true items=images />;
      
        </ImgGallery>
    )

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。