Реагировать - применить ** активный ** класс к элементу с помощью модулей CSS

Question

Я углубляюсь в React и обнаружил небольшую проблему с управлением активными именами классов при использовании модулей CSS.

Предположим, я хочу разработать компонент Tabs React.Я хотел бы применить класс active к текущему элементу списка.Заголовки вкладок создаются следующим компонентом:

import React, { Component } from 'react';
import styles from './Tabs.scss';

export default class TabHeader extends Component {

    render() {
        let activeTabIndex = this.props.activeTabIndex;

        return (
            <ul className={styles['tabs-header']}>
                {
                    this.props.data.map((item, index) => {
                        return (
                            <li key={index}>
                                <a className={(index === activeTabIndex) ? 'active' : ''} href="#">
                                    <span>{item.header}</span>
                                </a>
                            </li>
                        )
                    })
                }
            </ul>
        );
    }
}

Как видите, я условно добавил класс active к заинтересованному элементу списка.Код таблицы стилей - Tabs.scss:

.tabs-header {
    display: table;
    width: 100%;
    list-style-type: none;

    & li {
        display: table-cell;
        text-align: center;
        color: #ECF0F1;
        cursor: pointer;

        a {
            display: block;
            padding: 15px;
            background: #212F3D;
            transition: all .2s ease-in;
            transform: skew(-40deg);

            &:hover {
                background: #2471A3;
                color: #F7F9F9;
            }

            & span {
                display: block;
                transform: skew(40deg);
            }

            &.active {
                background: #2471A3;
            }
        }
    }
}

При этой настройке активный элемент не использует код active css.Как я могу решить проблему?

РЕДАКТИРОВАТЬ: пропеллер activeTabIndex (целое число больше или равно нулю) работает правильно.Если я проверяю элементы, я вижу, что класс active добавляется в список активных элементов, но он не указывает на класс, определенный в Tabs.scss.Просто чтобы указать на это, при использовании className={styles['tabs-header']} в элементе ul это будет преобразовано в Tabs__tabs-header__2LSPG.

Answer 1

Мне нужно попробовать это, чтобы быть уверенным в этом, но я думаю, что вы должны использовать styles.active вместо 'active’.