Swiper CSS not being applied

Question

I'm having trouble applying CSS styles into swiper pagination and swiper navigation for my React project. Here's my code:

I've tried updating the swiper.js file --swiper-theme-color: to #800080, for example, but it's not being applied. Updating the buttons using swiper-button-next and swiper-button-prev isn't working too. Thanks in advance.

import { register } from 'swiper/element/bundle';

    import 'swiper/css';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';
    import './App.css';
    import img1 from './img/1.jpg';
    import img2 from './img/2.jpg';
    import img3 from './img/3.jpg';

    function App() {
      register();
      return (
        <div className="App">
          <swiper-container slides-per-view="1" speed="500" loop="true" navigation="true" pagination="true" autoplay="true" css-mode="true">
            <swiper-slide>
              <img src={img1} alt="Picture 1" className='image-slider'/>
            </swiper-slide>
            <swiper-slide>
              <img src={img2} alt="Picture 2" className='image-slider'/>
            </swiper-slide>
            <swiper-slide>
              <img src={img3} alt="Picture 3" className='image-slider'/>
            </swiper-slide>
          </swiper-container>
        </div>
      );
    }

    export default App;