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 = () => { return ( 
 
 
1
 
2
 
3
 
4
 
5
 
 
 ); }; 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

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

Mais li.active n'est pas appliqué