JS如何实现类

1.使用原型

import React from 'react';

const SvgIcon = ({ src, ...props }) => (
  <img src={src} alt="icon" {...props} />
  // 或使用更高效的 SVG 内联方式：
  // <svg {...props}>{/* 粘贴 SVG 代码 */}</svg>
);

export default SvgIcon;

import './App.css';
import { Steps } from 'antd';
import React from 'react';
import css from './style.module.css';
import { CheckOutlined, HistoryOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import SvgIcon from './Icon';
import IconTime from './assets/icon-start.svg'
const { Step } = Steps;
const description = 'This is a description.';
let startDate = '2024-10-16';
let betweenDate = '2024-12-25';
let endDate = '2025-01-13';
let current = 2;
console.log(css);


function Icon() {
  const [subTitle, setSubTitle] = useState('火热报名中');

  return (
    <CheckOutlined />
  )
}
const ChanegICon = (current) => {
  console.log(current);
  switch (current) {
    case 0:
      return <CheckOutlined />
    case 1:
      return <CheckOutlined />
    case 2:
      return <SvgIcon src={IconTime} className="ant-steps-icon"/>
    default:
      return <CheckOutlined />
  }
}

function App() {
  const [subTitle, setSubTitle] = useState('火热报名中');
  const [icon, setIcon] = React.useState(2)

  // setTimeout(() => {
  //   setIcon(1)
  // }, 5000);
  return (
    <div className={css.contentWrapper}>
      <Steps current={current}>
        <Step title={startDate} description="开始" icon={ChanegICon(icon)
        } subTitle={subTitle} />
        <Step title={betweenDate} description="复赛" icon={ChanegICon(icon)} subTitle={subTitle} />
        <Step title={endDate} description="结束" icon={ChanegICon(icon)} subTitle={subTitle} />
      </Steps>
    </div>
  )
}

export default App;


.contentWrapper {
    margin-top: 20px;
    width: 1200px;
    margin: 100px auto;
}

.contentWrapper :global(.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:first-child) {
    padding-left: 0px;
}

.contentWrapper :global(.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item) {
    padding-left: 0px;
}

.contentWrapper :global(.ant-steps-item-content) {
    display: inline-block !important;
    vertical-align: top;
    position: relative;
    height: 94px;
    width: 140px;
    text-align: center;
    /* 增加居中 */
}

.contentWrapper :global(.ant-steps .ant-steps-item) {
    position: relative;
    display: inline-block;
    flex: 1;
    vertical-align: top;
    overflow: visible;
}

.contentWrapper :global(.ant-steps-item-container) {
    outline: none;
    display: flex;
    align-items: center;
    position: relative;
}

.contentWrapper :global(.ant-steps-item-title) {
    position: absolute;
    display: flex;
    align-items: center;
    padding-right: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    line-height: 32px;
    top: -10px;
    left: -1px;
}

.contentWrapper :global(.ant-steps-item-subtitle) {
    display: inline-block;
    visibility: hidden;
    margin-left: 8px;
    color: #fff;
    font-weight: normal;
    font-size: 12px;
    line-height: 22px;
    background-color: #ff4c23;
    border-radius: 4px;
    padding: 0 10px;
}

.contentWrapper :global(.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:first-child .ant-steps-item-title::after) {
    width: 371px;
}

.contentWrapper :global(.ant-steps-item-title::after) {
    position: absolute;
    top: 55px;
    left: 34%;
    display: block;
    width: 388px;
    height: 8px;
    background: #dadada;
    content: '';
    border-top: 1px solid #aaaaaa;
    z-index: -1;
}

.contentWrapper :global(.ant-steps-item-description) {
    position: absolute;
    top: 74px;
    left: 33%;
    transform: translateX(-50%);
    width: 140px;
    text-align: center;
    white-space: normal;
}

.contentWrapper :global(.ant-steps:not(.ant-steps-vertical) .ant-steps-item-custom .ant-steps-item-icon) {
    position: absolute;
    top: 31px;
    left: 29px;
}

.contentWrapper :global(.ant-steps-item-custom > .ant-steps-item-container > .ant-steps-item-icon > .ant-steps-icon) {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    top: 0px;
    left: 0.5px;
    width: 32px;
    height: 32px;
    font-size: 15px;
    line-height: 15px;
}

.contentWrapper :global(.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon) {
    color: #e5ecfa;
    border: 4px solid #e5ecfa;
    background-color: #ffffff;
}

.contentWrapper :global(.ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon) {
    color: #ffffff;
    border: 4px solid #ffffff;
    background-color: #36c49b;
    box-shadow: 0 0 4px #f7f7f7,
        0 0 8px #eaeaea, 0 0 12px #dcdcdc,
        0 0 16px #ffffff;
}

.contentWrapper :global(.ant-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon) {
    color: #ffffff;
    border: 4px solid #ffffff;
    background-color: #6b6b6b;
    box-shadow: 0 0 4px #f7f7f7,
        0 0 8px #eaeaea, 0 0 12px #dcdcdc,
        0 0 16px #ffffff;
}

.contentWrapper :global(.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title) {
    color: #36c49b;
}

.contentWrapper :global(.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title) {
    color: #36c49b;
}

.contentWrapper :global(.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title > .ant-steps-item-subtitle) {
    visibility: visible;
}

.contentWrapper :global(.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description) {
    color: #36c49b;
}

.contentWrapper :global(.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description) {
    color: #070707;
}

.contentWrapper :global(.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after) {
    background-color: #696969;
}