时间戳

首页 > 解决方案 > 样式标签打字稿

css - 样式标签打字稿

问题描述

我正在尝试设置使用此代码创建的选项卡的样式，但似乎没有任何效果。https://medium.com/weekly-webtips/create-basic-tabs-component-react-typescript-231a2327f7b6。这是我尝试过的最新方法，但它一直给我错误Set each active className on react Tab components

我也尝试过 <div className "tab"> 然后创建了一个 css 文件来尝试在那里编辑选项卡，这确实有效，但不适用于我想要它做的改变选项卡名称的字体样式，颜色等

任何帮助表示赞赏，谢谢。

标签： cssreactjstypescripttabs

解决方案

请在提问时用示例编写适当的代码。

但你的解决方案是：

// app.tsx
import Tabs from "./tab"
import "./style.css"

const App= () => {
    return (
        <Tabs>
            <span title="Lemon">Lemon is yellow</span>
            <span title="Strawberry">Strawberry is red</span>
            <span title="spanear">spanear is green</span>
        </Tabs>
    )
}

export default App

// tab.tsx

import React, { ReactElement, useState } from "react"
import TabTitle from "./tabtitle"

type Props = {
  children: ReactElement[]
}

const Tabs: React.FC<Props> = ({ children }) => {
  const [selectedTab, setSelectedTab] = useState(0)

  return (
    <div>
      <ul className="ul">
        {children.map((item, index) => (
          <TabTitle
            key={index}
            title={item.props.title}
            index={index}
            setSelectedTab={setSelectedTab}
            selectedTab={selectedTab}
          />
        ))}
      </ul>
      {children[selectedTab]}
    </div>
  )
}

export default Tabs

// tabtitle.tsx

import React, { useCallback } from "react"

type Props = {
    title: string
    index: number
    setSelectedTab: (index: number) => void
    selectedTab: number
}

const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index, selectedTab }) => {

    const onClick = useCallback(() => {
        setSelectedTab(index)
    }, [setSelectedTab, index])

    return (
        <li className={`li ${selectedTab === index ? 'active' : ''}`}>
            <button onClick={onClick}>{title}</button>
        </li>
    )
}

export default TabTitle

// style.css

.li {
    list-style-type: none;
    float: left;
}

.active>button {
    background: red;
    font-weight: bold;
}

推荐阅读