How can I modify the swiper.bundle.css? - css

Question

I just added a swiper to my React project, and I need the pagination background to be transparent. The modifications I make on the CSS file don't seem to have any effect on the page itself.
So the first part is my JSX file, and the second is my CSS file. Both are linked correctly, I tried modifying the minified file but the problem remains the same.
import React, { useEffect, useState } from 'react';
import Game from '../Game';
import axios from 'axios';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper';
import 'swiper/swiper-bundle.css';
import { Keyboard, Pagination, A11y } from 'swiper';
const GamesList = (props) => {
const { searchValue, setGameId, gameId, platform, genre } = props;
const [data, setData] = useState([]);
useEffect(() => {
const timeout = setTimeout(() => {
axios
.get(
`https://api.rawg.io/api/games?key=453247c1c78a4a88aa6594a59227801b&genres=${genre}&platforms=${platform}&search=${searchValue}`
)
.then((res) => {
setData(res.data.results);
});
}, 700);
return () => clearTimeout(timeout);
}, [searchValue, platform, genre]);
return (
<div id='list'>
{/* <p>{platformName}</p> */}
<Swiper
modules={[Navigation, A11y, Keyboard, Pagination]}
pagination
navigation
a11y
keyboard
effect
speed={800}
slidesPerView={3}
loop
className='my-swiper'
>
{data
.filter((gameChoice) => gameChoice.name.toLowerCase())
.map((game, index) => (
<SwiperSlide>
<Game/>
</SwiperSlide>
))}
</Swiper>
</div>
);
};
export default GamesList;
I tried adding the "background: none" line but nothing happened...
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
background: none;
}