react-id-swiperのスタイルが反映されない問題 #React

バージョン

swiper 5.4.2
react-id-swiper 3.0.0

内容

以下のように、パッケージをインストールして、テキトーにコンポーネントを作成してみた。

$ npm i -S swiper@5.4.2 react-id-swiper@3.0.0

import React from 'react';
import Swiper from 'react-id-swiper';

const ImageSwiper = () => (
  <Swiper>
    <div>スライドです。</div>
    <div>スライドです。</div>
    <div>スライドです。</div>
    <div>スライドです。</div>
    <div>スライドです。</div>
  </Swiper>
);

このコンポーネントを表示しようとしたが、スタイルが適応されていないらしく、正常に動いていなかった。

解決方法

CDNからcssをインポートする。

コンポーネントに直接インポートすることはできないので、以下のように、CDNから読み込むようのcssを作成する

src/assets/style/swiper.css

 @import 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css';

このcssファイルをコンポーネントで呼び出す。

import React from 'react';
import Swiper from 'react-id-swiper';
import '../../assets/swiper.css'; // 追加

const ImageSwiper = () => (
  <Swiper>
    <div>スライドです。</div>
    <div>スライドです。</div>
    <div>スライドです。</div>
    <div>スライドです。</div>
    <div>スライドです。</div>
  </Swiper>
);