Verwende ich das scss-Modul von NextJS richtig oder mache ich es falsch?

Question

Ich habe eine pagination.tsx-Komponente und eine pagination.module.scss-Datei mit Stilen

.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;
    }
  }
}

Die vereinfachte React-Komponente lautet wie folgt:

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: Im eigentlichen Code wird aktiv dynamisch über Klassennamen festgelegt, aber hier handelt es sich um eine statische Klasse

Mein Problem ist, dass der Stil von .pagination li.active nicht angewendet wird und die Hintergrundfarbe nicht als #4CAF50

angezeigt wird Die Stile auf

ul lassen sich sehr gut anwenden, ebenso wie auf li

Aber li.active wird nicht angewendet

Answer 1

将您的li标签的className值替换为styles.active，问题应该就解决了