Est-ce que j'utilise correctement le module scss de NextJS ou est-ce que je le fais mal ?

Question

J'ai un composant pagination.tsx et un fichier pagination.module.scss contenant des styles

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

Le composant React simplifié est le suivant :

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 : Dans le code actuel, active est défini dynamiquement via les noms de classe, mais ici c'est une classe statique

Mon problème est que le style de .pagination li.active n'est pas appliqué et la couleur de fond n'apparaît pas comme #4CAF50

Les styles sur

ul sont très bien appliqués, ainsi que sur li

Mais li.active n'est pas appliqué

Answer 1

Remplacez la valeur className de votre balise li par styles.active et le problème devrait être résolu