Style tabs typescript-CodePudding

I'm trying to style tabs I have created with this code, but nothing seems to work. 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

I've also tried doing <div className "tab"> and then created a css file to try and edit the tabs there, which does work but not for what I want it to do which is change the font style of the tab names, color, etc.

Any help is appreciated, thanks.

CodePudding user response：

Please write a proper code with example while asking question.

But your solution is:

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