Adakah saya menggunakan modul scss NextJS dengan betul, atau adakah saya salah melakukannya?

Question

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

Gaya pada

ul digunakan dengan sangat baik, begitu juga pada li

Tetapi li.active tidak digunakan

Answer 1

Ganti nilai className tag li anda dengan styles.active dan masalahnya harus diselesaikan