cari

Rumah  >  Soal Jawab  >  teks badan

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

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

P粉349222772P粉349222772436 hari yang lalu742

membalas semua(1)saya akan balas

  • P粉346326040

    P粉3463260402023-09-17 15:00:43

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

    balas
    0
  • Batalbalas