Попытка установить CSS для активной / стандартной вкладки в меню / навигационной панели, но активный класс не работает

Question

У меня есть компонент React, в котором я создаю вкладки на основе количества дочерних элементов в моем компоненте Tabs.

У меня CSS настроен базовый стиль вкладок, а также :focus стилей, но когда компонент загружается, я пытаюсь применить те же стили из :focus к классу :active, чтобы вкладка по умолчанию при загрузке меню отображалась как активная вкладка, но по какой-то причине просто передавая стили в класс :active не работают с моими стилизованными компонентами.

Прямо сейчас, когда меню загружается, вкладки отображаются как неактивные со стандартным стилем.

Мой компонент вкладки:

import React, { useState } from 'react';
import styled from 'styled-components';

type Props = {
  children: React.ReactNode;
};

const Tabs = (props: Props) => {
  const { children } = props;
  const [tab, setTab] = useState(0);
  const childrenList = React.Children.toArray(children);

  const tabs = childrenList.map((child, idx) => {
    const title = (child as any).props.title ?? idx;
    return (
      <StyledTabs key={title} onClick={() => setTab(idx)}>
        {title}
      </StyledTabs>
    );
  });

  const current = childrenList[tab];

  return (
    <div>
      <div>{tabs}</div>
      <div>{current}</div>
    </div>
  );
};

export default Tabs;

const StyledTabs = styled.button`
  margin: 0 10px;
  padding: 0 10px;
  padding-bottom: 5px;
  border: none;
  background: transparent;
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;

  :focus {
    color: #1471da;
    border-bottom: 1px solid #1471da;
    outline: none;
    padding-bottom: 5px;
  }

/* These Styles don't work */
    :active {
    color: #1471da;
    border-bottom: 1px solid #1471da;
    outline: none;
    padding-bottom: 5px;
  }
`;

Answer 1

Я думаю, вы путаете стандартный веб-псевдоселектор ": active" с настраиваемым классом "active" CSS. Псевдо обычно просто активен , в то время как элемент нажат. См., Например, здесь: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_active2.

С другой стороны, например, в https://react-bootstrap.github.io/components/tabs/, «активный» класс используется, чтобы сказать, что вкладки в настоящее время открыто. Чтобы настроить вкладку, которая в данный момент открыта, необходимо убедиться, что для нее задан настраиваемый класс, например «активный». Затем вы можете стилизовать его в CSS с помощью «.active», а не «: active».