尝试使用自定义顺风 css 库创建循环进度,但它不起作用

我的目标是建立一个循环进度指示器。

我遇到了图书馆 daisyui 及其 radial progress 组件 - https://daisyui.com/components/radial-progress/

它说:“径向进步需要 --value CSS 变量才能工作。”

我试过这样做:

      <div className="radial-progress" style={{ "--value": 70 }}>
        70%
      </div>

但是,它不起作用,我做错了什么吗?

这就是我想要实现的目标:

enter image description here

这是代码框链接: https://codesandbox.io/s/react-tailwind-playground-forked-9jwc49?file=/src/App.tsx

stack overflow Trying to create circular progress using custom tailwind css library, but its not working
原文答案

答案:

作者头像

这对我有用。

const style = { "--value": 70 } as React.CSSProperties

<div className="radial-progress" style={style}>
  70%
</div>
作者头像

我们将 react-circular-progressbar 打包在 react js 中,我们可以使用它来满足您的要求。

(或者)

我们有多个用于圆形进度条的软件包,您可以选择适合您的。

作者头像

我最近遇到了打字稿的这个问题。我刚刚在项目的根文件夹中添加了一个 global.d.ts 文件并使用模块扩充来解决问题

//global.d.ts
import React from "react";

declare module "react" {
  interface CSSProperties {
    "--value"?: string | number;
    "--size"?: string | number;
    "--thickness"?: string | number;
  }
}