样式标签打字稿

Question

我正在尝试为使用此代码创建的选项卡设置样式，但似乎没有任何效果。 https://medium.com/weekly-webtips/create-basic-tabs-component-react-typescript-231a2327f7b6. This was the most recent method that I tried but it kept giving me errors Set each active className on react Tab components

我也尝试过

然后创建了一个 css 文件来尝试编辑那里的选项卡，这确实有效但不是我想要的要做的是更改选项卡名称、颜色等的字体样式。

感谢任何帮助，谢谢。

Answer 1

提问时请写出正确的代码并举例。

但你的解决方案是：

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

样式标签打字稿

Style tabs typescript

css

tabs

typescript

reactjs