Rumah > Soal Jawab > teks badan
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
P粉3463260402023-09-17 15:00:43
Ganti nilai className tag li anda dengan styles.active dan masalahnya harus diselesaikan