Am I using NextJS's scss module correctly, or am I doing it wrong?

Question

I have a pagination.tsx component and a pagination.module.scss file containing 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;
    }
  }
}

The simplified React components are as follows:

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: In the actual code, active is set dynamically through classNames, but here is a static class

My problem is that the style of .pagination li.active is not applied and the background color is not displayed as #4CAF50

The styles on ul are applied well, and also on li

But li.active is not applied

Answer 1

Replace the className value of your li tag with styles.active and the problem should be solved