React-使用CSS模块将**活动**类应用于元素

我正在潜入React,我发现管理有点问题 积极的

假设我想开发一个组件。我想申请一份工作 积极的 类设置为当前列表项。选项卡标题由以下组件生成:

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>
        );
    }
}

积极的

.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;
            }
        }
    }
}

使用此设置时,活动项不使用 css代码。我怎样才能解决这个问题?

编辑:道具 activeTabIndex (大于或等于零的整数)工作正常。如果我检查元素,我可以看到类 active 正在添加到活动项列表中,但未指向Tabs.scss中定义的类。要指出的是,当使用 className={styles['tabs-header']} 在 ul Tabs__tabs-header__2LSPG .