0
191
VistasImportación de estilo (con paquete web) en reaccionar js
Estoy trabajando en un proyecto React y estoy tratando de usar esta biblioteca ( https://www.npmjs.com/package/react-image-gallery )
de npm Y de la Documentación, dicen que debemos agregar estas instrucciones para importar el CSS
mi componente
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> ) }mi paquete 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" },Pero cuando agrego esto en mi Componente me da este ERROR
Si no hay solución, sugiérame el nombre de una biblioteca similar a esta
2 Respuestas
Responde la pregunta0
Gracias a todos, el problema está resuelto. Agregué esto al componente.
import "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> ) }0
Debe importar solo los componentes de la biblioteca, no los archivos css o scss. Por ejemplo import ImageGallery from 'react-image-gallery' y utilícelo a continuación como <ImageGallery/> como de costumbre.
Si no tiene éxito, intente importar archivos css/scss a index.js