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
P粉3463260402023-09-17 15:00:43
Replace the className value of your li tag with styles.active and the problem should be solved