reactjs v18 做一个 progress灰色的底部进度条是白色的进度条的中间有文字文字是白色的如何让进度条走到白色文字的时候文字变为反色

要实现进度条在走到白色文字的位置时，文字变为反色，可以使用React Hooks和CSS样式来实现。

首先，你需要在React函数组件中使用useState来管理进度条的状态值。然后，使用CSS样式设置进度条的样式，包括底部灰色背景和白色进度条。最后，根据进度条的值，使用内联样式来动态改变文字的颜色。

下面是一个示例代码：

import React, { useState } from "react";
import "./ProgressBar.css"; // 引入CSS样式文件

const ProgressBar = () => {
  const [progress, setProgress] = useState(0); // 进度条的状态值

  const handleProgressChange = (e) => {
    setProgress(e.target.value); // 更新进度条的值
  };

  const getTextColor = () => {
    // 根据进度条的值，返回文字的颜色
    if (progress >= 50) {
      return "black"; // 进度条超过50%时，文字变为黑色
    } else {
      return "white"; // 进度条未超过50%时，文字仍为白色
    }
  };

  return (
    <div>
      <div className="progress-bar">
        <div
          className="progress"
          style={{ width: `${progress}%` }}
        ></div>
      </div>
      <div
        className="text"
        style={{ color: getTextColor() }}
      >
        {progress}%
      </div>
      <input
        type="range"
        min="0"
        max="100"
        value={progress}
        onChange={handleProgressChange}
      />
    </div>
  );
};

export default ProgressBar;

在上述代码中，我们创建了一个ProgressBar组件。使用useState来定义进度条的状态值progress，并通过setProgress函数来更新进度条的值。handleProgressChange函数用于监听进度条值的变化。

在组件的返回部分，我们使用了progress-bar类来定义进度条的底部灰色背景，使用progress类来定义进度条的白色进度。进度条的宽度通过style属性动态设置为progress的百分比。

通过getTextColor函数，根据进度条的值决定文字的颜色。如果进度条超过50%，则文字变为黑色，否则文字仍为白色。

最后，我们使用input元素来控制进度条的值