如何在 react-bootstrap 中設計 Custom Tab

Question

我正在使用react-bootstrap組件。 我在我的項目中使用tabs 。 我也在使用styled components 。 我使用了看起來像這樣的tabs

但我的要求是這樣的

選擇選項卡后，我只需要在其下方添加一行。 其他選項卡名稱應為灰色。 我搜索但找不到合適的解決方案。 請幫我解決一些問題。

這是我試過的代碼：

import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";
import styled from "styled-components";
import "bootstrap/dist/css/bootstrap.css";

export default function App() {
  const CustomTabs = styled(Tabs)`
    border-bottom: 0.5px solid gray;
    color: white;
  `;
  const CustomTab = styled(Tab)`
    color: gray;
    font-size: 19px;

    :active {
      color: black;
      border-bottom: 3px solid blue;
    }
  `;

  return (
    <div>
      <CustomTabs defaultActiveKey="tab1" id="uncontrolled-tab-example">
        <CustomTab eventKey="tab1" title="Tab1">
          Tab1 Content
        </CustomTab>
        <CustomTab eventKey="tab2" title="Tab2">
          Tab2 Content
        </CustomTab>
        <CustomTab eventKey="tab3" title="Tab3">
          Tab3 Content
        </CustomTab>
      </CustomTabs>
    </div>
  );
}

我找到了這些 css。但我不知道如何在樣式組件中使用它。 任何人幫我這個

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: orangered;
    background-color: #fff;
    border-color: none;
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link:hover{
    color: color:gray
}

Answer 1

理想情況下，您不希望將 styled-components 直接應用於 react-bootstrap 組件，但您可以做的是創建一個元素來包裝 react-bootstrap 組件並使用您從檢查中獲得的 CSS 類使其工作。

const StyledWrap = styled.div`
  & .nav-tabs li {
    background-color: red;
  }

  & .nav-tabs .active li {
    background-color: yellow;
  }
`
const CustomNavbar = (props) => {
  return (
    <StyledWrap>
        <NavItem active={true} />
        <NavItem />
    </StyledWrap>
  )
}