React js 上的样式导入（使用 webpack）

Question

我正在做一个 React 项目，我正在尝试使用这个库(https://www.npmjs.com/package/react-image-gallery)

来自 npm 并且从文档中，他们说我们必须添加这些说明以导入 CSS

我的组件

import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
 export  function Features() {


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 (
  
     
    <div>
      <ImageGallery items={images} />;
  
    </div>
   )
 }

我的包裹json

"dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.4",
    "@mui/material": "^5.2.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-image-gallery": "^1.2.7",
    "react-material-ui-carousel": "^3.1.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.0.1"
},

但是当我在我的组件中添加它时它给我这个错误

如果没有解决方案，请给我建议一个类似于这个的库的名称

Answer 1

您必须仅从库中导入组件，而不是 css 或 scss 文件。例如 import ImageGallery from 'react-image-gallery' 并像往常一样在下面使用 <ImageGallery/>。

如果不成功，请尝试将 css/scss 文件导入 index.js

Answer 2

谢谢大家，问题已解决我将其添加到组件

导入“react-image-gallery/styles/css/image-gallery.css”；

  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>
        )
          }

React js 上的样式导入（使用 webpack）

Style import (with webpack) on react js

javascript

npm

reactjs