问在选项卡下添加样式线并突出显示所选选项卡

EN

import { List, ListItems, Div } from './messageTab.elements';
function MessageTab() {
    return (

        <Tabs>
            <div label="Recent">
                Recent component
            </div>
            <div label="Unread">
                Unread component
            </div>
            <div label="Groups">
                Groups component
            </div>
        </Tabs>

    )
}


function Tabs(props) {
    const [activeTab, setActiveTab] = useState(props.children[0].props.label)
    const switchTabs = (tab) => {
        setActiveTab(tab);
    }

    console.log(activeTab);
    return (
        <Div>
            <List>
                {props.children.map((child) => {
                    const { label } = child.props;
                    return (
                        <Tab
                            activeTab={activeTab}
                            key={label}
                            label={label}
                            onClick={switchTabs}
                        />
                    );
                })}
            </List>
        </Div>
    );
}

function Tab(props) {
    const { label, onClick, activeTab } = props;
    console.log(activeTab);
    console.log(label);
    return (
        <ListItems onClick={() => onClick(label)}>{label}</ListItems>
    );
}

import styled from 'styled-components';

const ListItems = styled.li`
    margin-right : 6%;
    color: #9095A4;
    
`;

const List = styled.ul`
    display : flex;
    list-style-type : none;
    float : right;
    flex-direction: row;
    
`;

const Div = styled.div`
    display : flex;
    margin-left : 6%;
`;

export { List, ListItems, Div };