Почему может не работать цвет родительского элемента и css из переменной?

в<ul className={styles.navList}>
                        <li className={styles.navListItem}>
                        <NavLink to="/" className={({isActive})=> isActive ? activeLink : normalLink}>
                            
                            Projects
                        </NavLink>
                           
                        </li>

                        <li className={styles.navListItem}>

                        <NavLink to="/skills" className={({isActive})=> isActive ? activeLink : normalLink}>
                            Skills
                        </NavLink>
                        </li>

                        <li className={styles.navListItem}>

                        <NavLink to="/contacts" className={({isActive})=> isActive ? activeLink : normalLink}>
                            Contacts
                        </NavLink>
                        </li>
                    </ul>

Вот код и вот константы:

const activeLink = 'classNames(styles.navListLink, styles.navListLinkActive)'
    const normalLink = 'styles.navListLink'

проблема в том что по css текст должен быть белым и с подчёркиванием псевдоэлемента, но получается это:

Он цвета родительского элемента и css из переменной не работает