Saya mempunyai komponen pagination.tsx dan fail pagination.module.scss yang mengandungi gaya

.pagination {
  ul {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
  }

  li {
    display: inline;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;

    &.active {
      background-color: #4CAF50;
      color: white;
      border-radius: 5px;
    }

    &:hover:not(.active) {
      background-color: #ddd;
      border-radius: 5px;
    }
  }
}

Komponen React yang dipermudahkan adalah seperti berikut:

import React from 'react';

import styles from './pagination.module.scss';

const Pagination: React.FC<Props> = () => {
    return (
        <div className={styles.pagination}>
            <ul>
                <li className={'active'}>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    );
};
export default Pagination;

PS: Dalam kod sebenar, aktif ditetapkan secara dinamik melalui classNames, tetapi di sini ia adalah kelas statik

Masalah saya ialah gaya .penomboran li.aktif tidak digunakan dan warna latar belakang tidak kelihatan sebagai #4CAF50

ul digunakan dengan sangat baik, begitu juga pada li

Tetapi li.active tidak digunakan